【记录】关于百度地图在Nuxt3中的使用问题

在需要使用的页面

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

然后在组件渲染后调用

onMounted(async () => {
  // 注意加入异步
  await LoadBaiduMapScript()
  // 创建地图实例，初始化地图等操作
  setMap()
})

setMap方法跟百度地图例子差不多

const setMap = () => {
  try {
    let map = new BMap.Map(mapRef.value);  // 创建地图实例
    let point = new BMap.Point(
      companyList.value[currentIndex.value].lng,
      companyList.value[currentIndex.value].lat
    ) // 创建点坐标
    map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(false) //开启鼠标滚轮缩放
    let marker = new BMap.Marker(point) // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中
  } catch (error) {
    console.log(error);
  }
}

这样子就解决了