传单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个标记，元数据反映该位置的项目数和相关名称列表。

然后在宣传单标记群集组中，使用iconCreateFunction自定义显示的数字，以将这些朋友数量而不是子标记数量相加。