代码之家 › 专栏 › 技术社区 › Praveen Rao Chavan.G

Marker Cluster上的信息窗口-@react谷歌地图

react-google-maps-api google-maps-react google-maps-api-3 google-maps

0

Praveen Rao Chavan.G · 技术社区 · 2 年前

有没有办法在中显示标记簇上的信息窗口 @反应谷歌地图 ,我们已经在单个标记上显示了一个信息窗口,它工作得非常好,但没有找到为标记簇显示相同信息的方法。

我已经试过什么了?

我试图在标记簇中添加一个类似内部组件的信息窗口

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

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

0 回复 | 直到 2 年前

1

ClusterH 2 年前

首先,您需要在组件中创建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