标记集群上的信息窗口 - @react-google-maps

Question

有没有办法在 @react-google-maps 中的标记集群上显示信息窗口，我们已经在单个标记上显示了一个信息窗口，效果非常好，但没有找到一种方法来显示相同的信息窗口标记簇。

我已经尝试过什么？

我尝试添加一个信息窗口，例如标记簇内的内部组件

<GoogleMap setMap={setMap}>
  <MarkerClustererF onMouseOver={(ele)=>{setMarkerClusterTitle(ele);}}>
    {clusterer =>
    locs.map((loc: any) => (
    <>
      <CustomMarker position={loc} clusterer={clusterer} nodeData={loc.nodeData}
        primaryKeyColumnName={props.selectedTableInfo.pkColumnName} setNodeData={setCurrentMapNodeData}
        handleMapInfoWindowOpenClose={handleMapInfoWindowOpenClose} />
      <InfoWindow position={loc}>
        <div><strong>API : </strong>Working</div>
      </InfoWindow>
    </>
    ))
    }
  </MarkerClustererF>
</GoogleMap>

但这对集群不起作用，这只会为所有标记添加一个信息窗口，我们需要的是悬停时弹出的集群信息窗口。

Answer 1

首先，您需要在组件中创建 infoWindow 实例，并在

onMouseOver

、

onMouseOut

事件处理程序中打开和关闭。

const GoogleMapContainer = () => {
  const infoWindow = new google.maps.InfoWindow();
  .....
  const handleOpenInfoWindow = useCallback((cluster) => {
    infoWindow.setContent(`Current Cluster Length: ${cluster.markers.length}`);
    infoWindow.setPosition(cluster.getCenter());
    infoWindow.open(cluster.map);
  
  const handleCloseInfoWindow = useCallback((cluster) => {
    infoWindow.close(cluster.map);
  }, []);

  return (
    <GoogleMap setMap={setMap}>
       <MarkerCluster onMouseOver={(cluster) => handleOpenInfoWindow(cluster)} onMouseOut={(cluster) => handleCloseInfoWindow(cluster)}
       // Your markers array map here to show markers
       </MarkerCluster>
    </GoogleMap>
  );
}

export default GoogleMapContainer