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

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

1. 全局引入

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

<script type="text/javascript" 
    src="https://api.map.baidu.com/api?v=3.0&ak=XXXX">
</script>

2. 动态引入

通过动态引入，只有在组件用到百度地图的时候才会去加载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);
  });
}

3. 创建并百度地图

百度地图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>

---

新时代农民工