百度地图的异步加载

异步加载

目的

因为百度地图组件是异步加载，如果在vue里的mounted生命周期里创建地图实例，会报错：BMap is not defined。

所以需要解决这个问题，使用异步加载。

解决方案

以下解决方案全部以vue代码为例。

首先在src/assets文件夹中创建一个map.js。

map.js里的代码如下：

export default {
    init: function () {
        console.log("初始化百度地图脚本...");
        // 密钥
        const AK = "rhn2sxxGXhfnVTueHsiOib8wyly2kvyN";
        // 百度地图API文件链接，异步加载必须带参数callback，后面是回调函数。
        const BMap_URL = "http://api.map.baidu.com/api?v=3.0&ak=" + AK + "&callback=onBMapCallback";
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== "undefined") {
                resolve(BMap);
                return true;
            }
            // 百度地图异步加载回调处理
            window.onBMapCallback = function () {
                console.log("百度地图脚本初始化成功...");
                resolve(BMap);
            };

            // 插入script脚本
            let scriptNode = document.createElement("script");
            scriptNode.setAttribute("type", "text/javascript");
            scriptNode.setAttribute("src", BMap_URL);
            document.body.appendChild(scriptNode);
        });
    }
}

然后在需要加载地图的页面引入map.js。

import BaiduMap from "@/assets/js/map.js";

最后就可以在mounted生命周期里直接创建地图实例了。

mounted() {
    // 百度地图初始化
    BaiduMap.init().then((BMap) => {
      console.log(BMap);
      console.log("加载成功...");
      // 创建地图实例
      let map = new BMap.Map("container", {
        // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
        enableBizAuthLogo: false,
      });
    });
  },

完整代码

完整的代码以及扩展需求，请点击查看我的码云。