vue引入高德地图

项目中需要用到高德地图因此在这边给大家讲下如何使用高德地图

1. 注册

高德开放平台 | 高德地图API

2. 按照步骤获取自己的key

选择——菜单（应用管理）——>我的应用——>创建新应用（创建完会有个key值）

3. 在页面使用

安装@amap/amap-jsapi-loader

npm i @amap/amap-jsapi-loader --save

html/css模块

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<style scoped>
#container {
  width: 800px;
  height: 400px;
}
</style>

script模块

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图依赖
export default {
  data() {
    return {
        map: null,
      tabMap: null,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initMap();
  },
  // 存放方法事件 - 会在数据变化时被调用
  methods: {
    initMap() {
      AMapLoader.load({
        key: "就是高德地图的key值",
        version: "2.0",
        plugins: [  
          "AMap.MoveAnimation",
          "AMap.ToolBar",
          "AMap.MarkerCluster",
          "AMap.CircleEditor",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Polygon",
          "AMap.OverView",
          "AMap.ToolBar",
          "AMap.MapType",
          "AMap.PlaceSearch",
          "AMap.Geolocation",
          "AMap.Geocoder",
        ], // 需要使用的的插件列表，如地图区域圆，多边形，比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.tabMap = AMap;
          this.map = new AMap.Map("container", {
            viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom: 11, //初始化地图层级
            center: [116.397428, 39.90923], //初始化地图中心点
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>