AMap 聚合点信息展示不全

Question

咨询一个问题，2.0高德地图。。为何聚合了4个点，clusterData 只返回了一条数据。。我的任务是要，点击，弹窗展示4条信息，就实现不了该功能了。。有办法实现吗

Answer 1

引自免费微信小程序：皆我百晓生

在高德地图的聚合点（Cluster）功能中，clusterData数组理论上应当包含所有被聚合的点的信息。当您提到点击聚合点后只返回了一条数据，但实际有4个点被聚合时，可能是因为高德地图API在处理聚合逻辑时仅返回了一个代表整个簇的中心点信息。

要实现点击聚合点弹窗展示所有被聚合的点的信息，通常需要自行处理这个逻辑。以下是一个简化的示例步骤：

1. 在创建Marker并开启聚合功能时，确保你对每个原始Marker都有完整的详细信息，并且可以关联到对应的聚合点上。

// 假设 markers 是一个包含多个点信息的对象数组
markers.forEach((markerInfo, index) => {
  // 创建 Marker 并添加到地图
  const marker = new AMap.Marker({
    position: new AMap.LngLat(markerInfo.lng, markerInfo.lat),
    data: markerInfo, // 将详细信息与 Marker 关联
  });
  
  // 添加 Marker 到聚合层
  clusterer.addMarker(marker);
});

// 聚合配置，这里假设 clusterer 是你的聚合实例
AMap.plugin('AMap.MarkerClusterer', function () {
  clusterer = new AMap.MarkerClusterer(map, markers, {
    gridSize: 50,
    renderClusterMarker: function (renderOptions) {
      // 自定义聚合点标记，同时保存所有被聚合的点的数据
      const clusterMarkers = renderOptions.cluster.getMarkers();
      renderOptions.marker.data = clusterMarkers.map(m => m.data); // 存储所有聚合点的信息

      // ...其他自定义渲染逻辑
    },
  });
});

1. 配置点击事件，以便在点击聚合点时能够获取并展示所有聚合点的信息。

clusterer.on('click', function (e) {
  const clusterMarkersData = e.target.getData(); // 获取当前聚合点关联的所有原始点信息

  // 弹窗展示所有点的信息
  showInfoWindow(clusterMarkersData);
});

function showInfoWindow(markerDataArray) {
  // 这里编写弹窗内容填充和显示的逻辑
  // 可能是创建一个新的 InfoWindow 实例，并将数据循环展示出来
}

请注意，以上代码为伪代码示例，旨在帮助您理解如何解决这个问题。具体实现请参考高德地图官方文档提供的 API 和示例代码。由于高德地图的聚合功能可能不会直接提供所有聚合点的具体信息，所以需要开发者自己在添加 Marker 时就做好信息的存储和关联工作。