React Leaflet，在集群图标上显示鼠标悬停的工具提示

Question

我需要在集群上的鼠标悬停时显示工具提示（带有子信息）。

例如在这张图片中，当我越过绿色集群时，我想显示一个带有一些信息的工具提示。

img react leaflet map

我用

"反应": "^16.9.0",

"reactstrap": "^8.0.1"

“传单”：“^1.6.0”

"react-leaflet": "^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>}