AMap.MarkerCluster

AMap.MarkerCluster

AMap.MarkerCluster 是高德地图 JavaScript API 中用于实现‌点聚合‌功能的插件。当地图上需要展示大量数据点时，该插件会自动将距离相近的点合并为一个聚合点，并显示聚合数量，从而避免点标记重叠，提升地图性能和可读性。‌ 

核心功能与行为

• ‌自动聚合‌：在缩放级别较低时，将距离小于特定阈值的点合并为一个聚合点；当缩放级别较高时，自动展开聚合点，显示原始标记。‌ 
• ‌性能优化‌：在点数量不超过10万时，能保持较好的性能。‌ 
• ‌支持自定义‌：允许开发者自定义聚合点和非聚合点的样式、点击事件等。‌ 

基本使用步骤

1. ‌引入插件‌：通过高德地图的 AMapLoader 或直接引入 JSAPI 脚本加载 AMap.MarkerCluster 插件。‌ 
2. ‌初始化实例‌：创建 AMap.MarkerCluster 对象，传入地图实例和数据点数组（需包含经纬度信息）。‌ 
3. ‌配置选项‌：可设置聚合网格大小、最大聚合级别、自定义渲染函数等。‌ 

关键配置参数

• ‌points‌：数据点数组，每个点需包含 lnglat（经纬度）字段，可选 weight（权重）。‌ 
• ‌gridSize‌：聚合计算时网格的像素大小（默认60）。‌ 
• ‌maxZoom‌：最大的聚合级别（默认18，即18级及以上不聚合）。‌ 
• ‌renderClusterMarker‌：自定义聚合点样式的函数，接收 context 参数（包含聚合点数量、标记对象等）。‌ 
• ‌renderMarker‌：自定义非聚合点样式的函数，同样接收 context 参数。‌ 

事件处理

• ‌click 事件‌：支持鼠标左键单击聚合点或标记，事件回调提供点击位置、聚合点内标记列表等信息。‌ 
• 可为单个标记添加点击事件（如弹窗、高亮等）。‌ 

示例代码片段

 

 // 初始化点聚合
const cluster = new AMap.MarkerCluster(map, points, {
  gridSize: 30,
  renderClusterMarker: (context) => {
    // 自定义聚合点样式
    const div = document.createElement('div');
    div.style.backgroundColor = `hsl(${180 - context.count * 2}, 100%, 50%)`;
    div.style.width = `${30 + context.count}px`;
    div.style.height = `${30 + context.count}px`;
    div.innerHTML = context.count;
    context.marker.setContent(div);
  },
  renderMarker: (context) => {
    // 自定义非聚合点样式
    context.marker.setContent('<div class="custom-marker">??</div>');
  }
});

 

注意事项

• ‌数据格式‌：points 数组中的每个点必须包含 lnglat 字段（格式为 [经度, 纬度]）。‌ 
• ‌响应式更新‌：若数据动态变化，需通过 setData 方法更新点数据，而非重新初始化。‌ 
• ‌样式优先级‌：若设置了 renderClusterMarker，则 styles 参数无效。‌ 

通过灵活配置，AMap.MarkerCluster 可满足从简单数量显示到复杂交互（如聚合点点击展开详情）的需求。‌

 

 

=========================================