VueJs 引入百度地图报错: BMap is undefined

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 中使用百度地图,不止这一个坑,其他的根据自己项目中碰到的问题,来调试着解决。

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值