vue3 引入百度地图的三种方式

本次也是正好写了一个基于VUE3和百度地图的设计，但奈何第一次使用百度地图，在学习的途中遇到了很多问题，也发现网上的材料相对较少，因此做出了一些小总结，后续还会更新。

一、直接引入

直接在public中的index.html中进行引入

在body后或html后都可以的，相信也不用多说(引入记得修改ak秘钥还有版本问题)

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥">

二、在vue组件内部JS实现引入(可直接使用，初始化部分和ak秘钥自行修改即可)

<script setup>
onMounted(() => {
  // 加载百度地图资源
  loadMapScript(); 
});
function loadMapScript() {
  // 创建DOM元素，修改类型
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.className = "loadmap";
  script.src = "https://api.map.baidu.com/getscript?v=3.0&ak=你的ak";
  // 待资源加载完成，再初始化地图
  script.onload = () => {
    init();
  };
  // 添加类名
  let loadmap = document.getElementsByClassName("loadmap");
  // 去重
  if (loadmap) {
    // 每次append script之前判断一下，避免重复添加script资源标签
    for (var i = 0; i < loadmap.length; i++) {
      document.body.removeChild(loadmap[i]);
    }
  }
  // 添加到body里
  document.body.appendChild(script);
}

// 初始化地图部分
function init() {}
</script>

三、编写js文件，引用文件使用

这个就需要再项目中自行创建一个js文件了，这里我命名为bmp.js了，我是存在了src的assets中。

这里返回的是一个Promise对象，因此当我们使用then方法链式调用即可。

// bmp.js
export function BMPGL(ak) {
    return new Promise(function (resolve, reject) {
        window.init = function () {
            // eslint-disable-next-line
            resolve(BMapGL)
        }
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
        script.onerror = reject
        document.head.appendChild(script)
    })
}

// 引用
BMAP(你的ak秘钥).then(resolve => {
    // 初始化地图等处理
})