效果图

• 申请百度地图AK

前往 百度地图开放平台控制台 ，登录百度账号，创建应用即得。

 封装loadBMap.js文件

/*** 动态加载百度地图api函数* @param {String} ak  百度地图AK，必传*/
export default function loadBMap(ak) {return new Promise(function(resolve, reject) {if (typeof window.BMap !== 'undefined') {resolve(window.BMap)return true}window.onBMapCallback = function() {resolve(window.BMap)}let script = document.createElement('script')script.type = 'text/javascript'script.src ='http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'script.onerror = rejectdocument.head.appendChild(script)})
}

第2步：在组件中引入loadBMap函数

import loadBMap from '@/<js资源文件夹>/loadBMap.js'

第3步：在mounted中调用 loadBMap()

//这里运用async/await 进行异步处理，保证BMap加载进来后才执行后面的操作
async mounted() {await loadBMap('您的密钥') //加载引入BMap...
}

具体可以参考该作者：vue百度地图搜索定位(IT技术) 

里面有步骤以及代码可以结合操作哦