vue+高德地图 系列二 Vue项目引入原生高德地图

---

前言

vue + vue-cli3 + 高德地图
本章所讲的是原生的高德地图，而不是vue-amap
主要因为原生的api更详细，功能更多，而且有例子可供参考

---

一、AMap.js

项目里的引用文件，css，js链接，都以下列方式引入，重点注意插件的引用
示例代码中引用的link和script，是我项目中实际用到的，具体用到哪些，可以参照高德实例，人家例子里用到什么，你就引入什么

代码如下（示例）：

// 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
      var link = document.createElement("link");
      link.type = "text/css";
      link.rel = "stylesheet";
      link.src = "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css";
      document.head.appendChild(link);

      // 引入，注意链接要用https://
      // 用了2种插件，plugin=AMap.MouseTool,AMap.PolyEditor
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=你的高德地图的key&plugin=AMap.MouseTool,AMap.PolyEditor";
      script.onerror = reject;
      document.head.appendChild(script);

      var script1 = document.createElement("script");
      script1.type = "text/javascript";
      script1.async = true;
      script1.src = "https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js";
      script1.onerror = reject;
      document.head.appendChild(script1);
    }

    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

---

二、页面引用

1. 先写一个map 的 容器 div，要给这容器设置高度，不然地图不显示；
2. 引入AMap.js
3.在 mounted 里用 MapLoader() 初始化地图

代码如下（示例）：

<template>
  <div class="common-containar" >
      <!-- 地图 开始-->
      <div id="container"></div>
      <!-- 地图 结束 -->
  </div>
</template>

<script>
import MapLoader from "@/assets/js/AMap.js";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      let that = this;
      MapLoader().then(
        (AMap) => {
          that.map = new AMap.Map("container", {
            zoom: 12,
          });
          console.log("地图加载成功", e);
        },
        (e) => {
          console.log("地图加载失败", e);
        }
      );
    });
  },
};
</script>

<style scoped>
#container {
  height: 100%;
}
</style>

---

三、其他

vue.config.js引入

说实话上述一二步就能正常运行展示地图，这一步具体啥效果，我还真没研究过，但是加上也没坏处

externals: {
	'AMap': 'AMap'
},

---

总结

高德地图引入Vue项目的方式，应该不止这一种，这个是只在需要的页面引入，算是按需加载，简单有效