三大地图异步加载

一个假的前端男

已于 2023-02-07 11:12:37 修改

阅读量359

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2023-01-29 10:41:14 首次发布

本文链接：https://blog.csdn.net/it_iosers/article/details/128785567

版权

vue 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

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

在这里插入图片描述

这里写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>