高德地图 jsApi AMap.MarkerCluster 插件

HTML

// dom
<template>
   <div>
       <div ref="aMap"/>
       <div ref="vue_map_InfoWindow"/>
   </div>
</template>

引入高德地图

import AMapLoader from '@amap/amap-jsapi-loader';

window._AMapSecurityConfig = {
  securityJsCode: "自己申请的key",
};

// 实例化
this.map = new AMap.Map(this.$refs.aMap, {
  resizeEnable: true,
  zoomEnable: true,
  zooms: [3, 20],
  showIndoorMap: false
});

绘制点聚合

用于地图上加载大量点标记，提高地图的绘制和显示性能。目前点聚合插件聚合的点的数量在10万以内时可以保持较好的性能。点聚合支持用户自定义点标记

const points = [{
    weight: 1, // 是点标记的权重信息，以权重高的点为中心进行聚合
    lnglat: ["121.434529", "31.215641"] // 经纬度
    ...rest // 其他参数可在自定义 renderMarker 事件中获取
}];

这里是单个 marker 的 render 事件, 默认没有触发聚合或者聚合下钻到无法聚合时可以根据 renderMarker 自定义渲染 marker

const options = {
 // 单个 maker 的 render
 renderMarker: context => {
   const marker = context.marker // marker 实例
  
   const icon = '自定义图片路径'; // 可以根据不同的数据生成不同的图片
   icon && marker.setIcon(icon);
   const title = '鼠标移入显示的title'
   title && marker.setTitle(title);
   // 单个 marker 的点击事件
   marker.on('click', (e) => {
     // 这里可以自定义经纬度或者获取当前marker的经纬度设置成地图中心(默认有画面过渡)
     // do something ...
   })
 }
}

this.MarkerCluster = new AMap.MarkerCluster({
   map, // 地图实例
   points, // 要绘制的点
   options // 相关配置
})