vue3使用百度地图获取位置信息

梦里梦外; 2024-03-27 17:47 112阅读 0赞

本文介绍如何用vue3引入百度地图并使用。引入百度地图有两种方法，一种是全局引入，一种是动态引入。

1.  ##### 全局引入 #####

在index.html文件中直接插入script引用。好处的是配置简单方便，缺点时不论是否用到了百度地图都会加载对应的js文件。

1.  ##### 动态引入 #####

通过动态引入，只有在组件用到百度地图的时候才会去加载js文件，如果没用到就不会，方便灵活。动态加载百度地图js的代码如下：

// map.js
    // 加载百度地图
    export function LoadBaiduMapScript() {                   
      const BMap_URL = "https://api.map.baidu.com/api?v=3.0&ak=XXXX&callback=onBMapCallback";
      return new Promise((resolve, _reject) => {
          // 如果已加载直接返回
          if(typeof BMap !== "undefined") {
              resolve(BMap);
              return true;
          }
          // 百度地图异步加载回调处理
          window.onBMapCallback = function () {
              console.log("百度地图脚本初始化成功...");
              resolve(BMap);
          };
          // 插入script脚本
          const scriptNode = document.createElement("script");
          scriptNode.setAttribute("type", "text/javascript");
          scriptNode.setAttribute("src", BMap_URL);
          document.body.appendChild(scriptNode);
      });
    }

1.  ##### 创建并百度地图 #####

百度地图js文件加载完毕后，就可以直接通new BMap进行百度地图的创建和使用。

<template>
        <div id="container" class="positionbox"></div>
    </template>
    <script lang="ts" setup>
      import { ref, unref, onMounted } from 'vue';
      import { LoadBaiduMapScript } from './map';  
    
      const address: any = ref('河南省郑州市二七区建设东路48号');
      const lon: any = ref(113.65);
      const lat: any = ref(34.76);
      const map: any = ref({});
      const point: any = ref({});
      const marker: any = ref({});
    
      onMounted(async () => {
        await LoadBaiduMapScript();
        initMap();
      });
    
      const initMap = () => {
        // 1.创建地图实例
        map.value = new BMap.Map('container');
        // 2.设置中心点
        point.value = new BMap.Point(lon.value, lat.value);
        // 3.设置级别
        unref(map).centerAndZoom(point.value, 15);
        // 4.开启鼠标滚轮缩放功能。仅对PC上有效
        unref(map).enableScrollWheelZoom();
        const myIcon = new BMap.Icon(positionIcon, new BMap.Size(23, 25));
        marker.value = new BMap.Marker(point.value, myIcon);
        unref(map).addOverlay(marker.value); //添加一个标注
        // 打开信息窗口
        upInfoWindow();
        // 点击地图事件
        unref(map).addEventListener('click', function (e: any) {
          lon.value = e.point.lng;
          lat.value = e.point.lat;
          point.value = new BMap.Point(lon.value, lat.value);
          unref(map).centerAndZoom(point.value, 15);
          upInfoWindow();
          const gc = new BMap.Geocoder();
          gc.getLocation(point.value, (rs: any) => {
            if (rs && rs.address) {
              address.value = rs.address;
            }
          });
        });
    </script>

--------------------

[新时代农民工][Link 1]

[Link 1]: https://www.sgknight.cn/