vue这样引入高德地图

引入高德地图一般最常使用同步方式，直接放在index.html中的head中引入js文件。

<!--引入高德地图JSAPI -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<!--引入UI组件库（1.0版本） -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

这种引入方式叫同步加载，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
2.异步引入方式

1.动态创建script标签

<!--异步加载 高德地图JSAPI ，注意 callback 参数-->
    window.init= function(){
      var map = new AMap.Map('container');
    }
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//webapi.amap.com/maps?v=1.4.15&key="+key+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);

高德地图最新的引入方式，2020年03月31日，地图 JS API v2.0 发布，欢迎使用

这里是官网介绍的加载方式，建议使用

https://lbs.amap.com/api/jsapi-v2/guide/abc/load

下面我们来讲再此之前经常使用的引入方式

单独创建一个js文件
比如在应用util文件夹下创建个文件名为 loadMap.js

/**
 * 异步加载高德地图
 *
 * @export
 * @param {*} key 高德地图key
 * @param {*} plugins 高德地图插件
 * @param {string} [v='2.0'] 高德地图版本
 * @returns
 */

const v = "1.4.15";
const key = "";
const plugins = [
    "ElasticMarker",
    "AMap.MouseTool",
    "AMap.PolyEditor",
    "AMap.MarkerClusterer",
    "AMap.RangingTool",
    "AMap.DistrictSearch",
    "AMap.OverView",
    "AMap.DistrictLayer",
    "AMap.CustomLayer"
];

export default function mapLoader() {
    if (window.AMap) { // 已经加载成功，不重复加载
        return new Promise((resolve) => {
            resolve(window.AMap)
        })
    }
    const loadMap = new Promise(function(resolve, reject) {
        window.init = function() {
            resolve(AMap)
        };
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.async = true;
        script.src = `//webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=init`;
        script.onerror = reject;
        document.head.appendChild(script);
    });
    const loadMapUI = new Promise(function(resolve, reject) {
        let script2 = document.createElement("script");
        script2.type = "text/javascript";
        script2.async = true;
        script2.src = "//webapi.amap.com/ui/1.0/main-async.js";
        script2.onerror = reject;
        script2.onload = function() {
            //onload必须写在最后
            resolve('success')
        };
        document.head.appendChild(script2);
    });

    return Promise.all([loadMap, loadMapUI])
        .then(function(result) {
            return result[0]
        }).catch(e => {
            console.log(e);
        })
};

然后在需要的文件中引入此方法

import mapLoader from "@/utils/loadMap";


    async creatMap() {
      await mapLoader()
        .then(async AMap => {
          console.log("MP加载。。then。。。", AMap);
          if (!window.AMapUI) {
            // 如果还没有初始化
            await initAMapUI(); // 这里调用initAMapUI初始化
          }
          await this.initPage(); //加载地图
        })
        .catch(err => {
          this.$message({
            message: "地图加载失败，" + err,
            type: "error",
            duration: 3000
          });
          console.log("MP加载。。err。。。", err);
        });
    },

先到这里，回见。

最后编辑于：2020.04.29 15:10:46