單張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標記羣集組中，使用iconCreateFunction來自定義顯示的數字，以便將這些數量的朋友相加，而不是子標記的數量。