leaflet - Leaflet js在单个坐标中处理大量标记

Question

我正在使用leafletjs 和leafletjs 标记聚类来显示我朋友的住所。问题是他们中的一些人住在同一个房子里，所以多个标记的坐标是相同的。当有超过 50 个朋友住在同一个地方时，就会出现问题。

有什么办法可以隐藏标记，当单击一个集群时，它会显示一个包含所有名称的表格？

我添加标记的代码：

export function markersFromData(map, markers) {
  return (data) => {
    const markerList = [];
    data.map((v) => {
      const title = v.name;
      const marker = L.marker(new L.LatLng(v.latitude, v.longitude), {
        opacity: 0,
      });
      marker.bindPopup(title);
      markerList.push(marker);
      return markers.addLayer(marker);
    });
    map.addLayer(markers);
    // eslint-disable-next-line
    const group = new L.featureGroup(markerList);
    map.fitBounds(group.getBounds());
  };
}

地图示例

感谢您的时间。

Answer 1

一个干净的解决方案不是为每个数据项（即朋友）构建一个标记，而是首先通过匹配位置对它们进行分组。

然后为每个位置构建 1 个标记，元数据反映该位置的项目数和相关名称列表。

然后在 Leaflet Marker 集群组中，使用iconCreateFunction自定义显示的数字来汇总这些朋友的数量，而不是子标记的数量。