高德地图学习（vue2项目）

第一步创建一个vue2项目

第二步下载地图插件命令如下

npm i @amap/amap-jsapi-loader

第三步：在需要使用的地图页面建立一个id为container的容器并设置宽高，并引入地图插件

<template>
  <div id="container">container</div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "地图申请的秘钥",
};
export default {
  name: "GaodeMapContainer",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const AMap = await AMapLoader.load({
        key: "申请的key值", //首次调用 load 时必填
        version: "2.0", 
        plugins: [""], // 需要使用的的插件列表
      });
       //设置地图容器id
      this.map = new AMap.Map("container", {
        viewMode: "3D", //是否为3D地图模式
        zoom: 5, //初始化地图级别
        center: [116.407387,39.904179], //初始化以北京为地图的中心位置
      });
    },
  },
};
</script>
<style scoped>
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 800px;
}
</style>