vue（vue-amap）项目调用高德地图（点坐标-聚合）

效果图

1590034279(1).jpg

一、获取高德地图的key

获取地址：高德开放平台https://lbs.amap.com/

二、npm安装vue-amap

npm install vue-amap --save

三、在项目main.js引入vue-amap

import AMap from 'vue-amap';
Vue.use(AMap);

  // 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: '你的key',
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','MarkerClusterer']
});

四、vue中使用（直接复制粘贴）

vue-amap APl地址

https://elemefe.github.io/vue-amap/#/zh-cn/examples/coverings/marker-cluster

高德 API地址

https://lbs.amap.com/api/javascript-api/example/marker/custom-icon/