React Leaflet，在群集圖標上的鼠標懸停時顯示工具提示

Question

我需要在群集上的鼠標懸停時顯示工具提示（帶有子信息）。

例如，在此圖像中，當我瀏覽綠色集群時，我想顯示包含一些信息的工具提示。

img 反應傳單地圖

我用

"反應": "^16.9.0",

“反應帶”：“^8.0.1”

“傳單”：“^1.6.0”

“反應傳單”：“^2.6.1”

“ react-leaflet-markercluster ”：“^2.0.0-rc3”*

這部分的代碼：

<MarkerClusterGroup showCoverageOnHover={true} onmouseover={(e)= (console.log(e.sourceTarget._markers))}>            
 <Marker position={[44.982963, 7.707891]} id="aabb"/>
 <Marker position={[49.839778, 24.029721]} id="ccdd"/>
 <Marker position={[52.229758, 21.012236]} id="eeff"/>
 <Marker position={[51.507466, -0.090148]} id="gghh"/>
</MarkerClusterGroup>

我可以通過onmouseover={(e)= (console.log(e.sourceTarget._markers))訪問信息，例如標記 ID。

敲你！

Answer 1

我想你在標記數組上使用地圖，所以：

<MarkerClusterGroup
  onMouseOver={(e) => {
    e.propagatedFrom.bindTooltip(`Markers: ${markers.length}`).openTooltip();
  }}
  onMouseOut={(e) => {
    e.propagatedFrom.unbindTooltip();
  }}>
  {markers.map((marker)=> 
   (<Marker position={[marker.lat, marker.lon]}>
    ..... 
    </Marker>))}
 </MarkerClusterGroup>}