三大地图异步加载

问题：在特定环境下 需要异步加载地图时 出现下列问题 （高德 偶尔出 百度必出 腾讯暂未发现）

这里写vue 的解决方式 三大地图都可解决

在utils文件创建baiDuMap.js

export default {
    
    
  init: function () {
    
    
    console.log("初始化百度地图脚本...");
    // 密钥

    const AK = "1111";
    // 百度地图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('我是啥')
        console.log("百度地图脚本初始化成功...");
        resolve(BMap);
      };

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

  }
}

在你需要的页面引入

<script>
	import BaiduMap from "@/unit/utils/baiDuMap.js";
	// 建议定义一个全局变量
	var BMap;
	export default {
    
    
		mounted() {
    
    
		 	this.initMap();
		},
		methods: {
    
    
			async initMap() {
    
    
			    AMap = await GaodeMap.init();
			    // 正常使用了
			        this.map = new AMap.Map(this.currentWidgetId + this._uid, {
    
    
          zoom: 14,
        });
			}
		  }
	}
</script>