用Promise异步加载其他js,比如百度地图等

前言

在开发一个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);
      });
  },