AMap-Vue

安装AMap-Vue

npm install --save @amap/amap-vue

在Main.js中配置

import AmapVue from '@amap/amap-vue';

AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = 'Key';
AmapVue.config.plugins = [

  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];

简单引用

<div class="my-map">
  <amap :zoom.sync="map.zoom" :center.sync="map.center">
    <amap-marker
      :position="[116.473179, 39.993169]"//标识中心位置
      :label="{ content: 'Hello, AMap-Vue!', direction: 'bottom' }"//标识中内容
      @click="onMarkerClick"//可以绑定点击事件
    />
  </amap>
</div>

因为是写在div中，所有点击事件、v-if等都可以添加，也可以通过ref获取地图的dom

this.$refs.myMap // 地图 AMapVue 对象
this.$refs.myMarker // 点标记 AMapVue 对象

详细api文档

介绍 | AMap-Vue (gitee.io)

且AMap-Vue兼容AMap JSAPI 2.0

概述-地图 JS API v2.0 | 高德地图API (amap.com)