VueJs 引入百度地图报错: BMap is undefined
Vue 项目中引入百度地图,想采用动态加载的方式,因为无需在每个页面统一引入。考虑到加载问题,将动态加载代码放入到 created() 生命周期方法中:let scriptNode = document.createElement('script');scriptNode.src = '//api.map.baidu.com/api?v=2.0&a...
·
Vue 项目中引入百度地图,想采用动态加载的方式,因为无需在每个页面统一引入。
考虑到加载问题,将动态加载代码放入到 created() 生命周期方法中:
let scriptNode = document.createElement('script');
scriptNode.src = '//api.map.baidu.com/api?v=2.0&ak=' + AK + '&callback=bMapInit';
document.body.appendChild(scriptNode);
发现报错:
BMap is undefined
因为异步加载,导致 BMap 使用时,未定义。
网上找了找,基本都是同一篇解决方案(可能其他的我没看到):
https://segmentfault.com/a/1190000012815739
按照上述方法生效!这里再书写一遍:
定义一个 utils/bmap.js 文件
// 这个导入百度地图 AK 配置,项目里将所有的配置信息都放在 configs/app.js
import {APP_CONFIG} from '../configs/app.js';
export default {
init: function (){
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if(typeof BMap !== "undefined") {
resolve(BMap);
return true;
}
// 百度地图异步加载回调处理
window.bMapInit = function () {
// console.log("百度地图脚本初始化成功...");
resolve(BMap);
};
// 插入script脚本
let scriptNode = document.createElement('script');
scriptNode.src = '//api.map.baidu.com/api?v=2.0&ak=' + APP_CONFIG.BAIDU_MAP_APP_AK + '&callback=bMapInit';
document.body.appendChild(scriptNode);
});
},
};
vue 使用:
import BMap from './utils/bmap.js';
BMap.init()
.then(BMap => {
var map = new BMap.Map("lbs-map", {
enableMapClick: false, // 禁用底图点击功能
});
});
在 Vue 中使用百度地图,不止这一个坑,其他的根据自己项目中碰到的问题,来调试着解决。
更多推荐
已为社区贡献5条内容
所有评论(0)