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>}