前言
在开发一个Vue项目过程中,碰到只有一个模块需要调用BaiduMap,在index.html中引入BMap成本太高,所以需要实现一个异步加载百度地图的方法,网上查了下,发现已经有很多相关的代码了,但总有一点点问题,比如BMap not defined,或者再次进入后Bmap失效之类的…这里分享一个可以稳定运行的Bmap,import模块化引入,即开即用
bmap.js
let _promise;
export function mapLoader() {
if (window.BMap) {
return Promise.resolve(window.BMap);
}
if (_promise) {
return _promise;
}
_promise = new Promise((resolve, reject) => {
window.onload = function() {
console.log("loadBmap Success", BMap);
window.BMap=BMap;//注意需要在window中赋值一下
resolve(BMap);
};
window.onerror = function(error) {
console.log("loadBmap error", error);
reject(error);
};
let script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src =
"https://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=initBMap";//src里必须要有callback=initBmap,也有说=initialize的,自己试一下,我是用initBmap
document.body.appendChild(script);
});
return _promise;
};
使用
import mapLoader from "@/util/bmapLoader";
//...
mounted() {
mapLoader().then(function() {
console.log(BMap);//这里的Bmap对象是window.BMap
var pointCurrent = new BMap.Point(123, 123); // 创建点坐标A 用户位置
var pointEnd = new BMap.Point(123, 123);
console.log(pointCurrent ,pointEnd);
});
},