Vue3 uses Baidu map to obtain location information

This article introduces how to introduce and use Baidu map with vue3. There are two ways to import Baidu Maps, one is global import and the other is dynamic import.

1. Global import

Insert the script reference directly in the index.html file. The advantage is that the configuration is simple and convenient, and the disadvantage is that the corresponding js file will be loaded regardless of whether Baidu Map is used or not.

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

2. Dynamic import

Through dynamic introduction, the js file will only be loaded when the component uses Baidu map, and will not be used if it is not used, which is convenient and flexible. The code for dynamically loading Baidu map js is as follows:

// 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. Create and Baidu map

After the Baidu map js file is loaded, you can directly create and use the Baidu map through 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>

---

New Era Migrant Workers