高德地图使用笔记

申请KEY

地图SDK的引用，需要有一个key值，具体可查看官网。申请地址

加载

异步加载的方式封装一个函数 loadMap

function loadMP(key) {
  const p1 = new Promise(function (resolve, reject) {
    window.init = function () {
      // map加载完成回调init
      resolve(AMap)
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://webapi.amap.com/maps?v=1.4.10&key=" + key + "&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  });
  const p2 = new Promise(function (resolve, reject) {
    let script2 = document.createElement("script");
    script2.type = "text/javascript";
    // 加载AMapUI
    script2.src = "https://webapi.amap.com/ui/1.0/main-async.js";
    script2.onerror = reject;
    script2.onload = function (su) {
      resolve('success')
    };
    document.head.appendChild(script2);
  });
  return Promise.all([p1, p2])
    .then(function (result) {
      // console.log('result----------->', result);
      return result[0]
    }).catch(e => {
      console.log(e);
    })
}

vue中调用：

  mounted() {
    const that = this;
    MP('申请的key').then((AMap) => {
      initAMapUI(); //这里调用initAMapUI初始化
      that.initMap(AMap);
    }).catch(err => {
      console.error('AMap err');
    })
  },
   methods: {
    initMap(AMap) {
      console.log("AMap--------------------", AMap);
      let map;
      map = new AMap.Map('container', {
        zoom: 11,
        resizeEnable: true,
        dragEnable: true,
      });
      map.on("complete", () => {
		// 地图加载完成回调 画图处理等
      })
     }
    }