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

Vue 项目中引入百度地图，想采用动态加载的方式，因为无需在每个页面统一引入。

考虑到加载问题，将动态加载代码放入到 created() 生命周期方法中：
let scriptNode = document.createElement(‘script’);
scriptNode.src = ‘https://api.map.baidu.com/api?v=2.0&ak=’ + AK + ‘&callback=bMapInit’;
document.body.appendChild(scriptNode);

发现报错：
BMap is undefined

因为异步加载，导致 BMap 使用时，未定义。

网上找了找，基本都是同一篇解决方案(可能其他的我没看到)：
segmentfault.com/a/119000001…

按照上述方法生效！这里再书写一遍：

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