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-lineresolve(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 = rejectdocument.head.appendChild(script)})
}

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