Reactjs 替换谷歌 map api默认信息窗口与自定义

Use event.stop() method for POI click event to prevent the Info Window from showing while still processing the Place ID (EDITED)

MapOptions上有一个名为clickableIcons的选项，您可以将其设置为false，这将禁用默认POI图标/标记上的单击功能.

遗憾的是，这也会禁用您可以使用map.addListener()获得placeId个图标的功能

我的建议是让开发人员能够在单击时修改默认POI的内容.https://developers.google.com/maps/support#issue_tracker

但由于Google Maps API目前没有这个功能，一个解决办法(感谢Ops的 comments )是，一旦你在POI点击上有了地点ID，就用event.stop关闭事件.

下面是使用提供的代码OP应该如何工作:

创建一个Info窗口状态挂钩，以便稍后存储内容并生成组件.

const [infoWindow, setInfoWindow] = React.useState(null);

在onLoad回调定义中，判断位置ID是否可用.然后，如果为真，则触发event.stop()方法以阻止显示默认的信息窗口，并继续处理获取的带有Places API的Place详细信息的Place ID，并将这些数据放在您将在单击的POI图标上呈现的自定义Info窗口上.

const onLoad = React.useCallback(function callback(map) {
  map.addListener("click", (event) => {
    if (event.placeId) {
      // once the check for Place ID is done, 
      // fire the event.stop() here to prevent the default Info Window from showing
      event.stop();
      
      // Proceed in processing the Place Details request
      // and create the custom Info Window based on the fetched data
      const request = {
        placeId: event.placeId,
        fields: [
          "name",
          "formatted_address",
          "place_id",
          "geometry",
          "photo",
        ],
      };

      const placesService = new google.maps.places.PlacesService(map);

      placesService.getDetails(request, (place, status) => {
        if (status === "OK") {
          // store the Info Window component inside a variable,
          // This will be put inside the Info Window state hook later.
          const info = (
            <InfoWindow
              position={{
                lat: place?.geometry?.location?.lat(),
                lng: place?.geometry?.location?.lng(),
              }}
              onCloseClick={() => setInfoWindow(null)}
            >
              <div>
                <h3>{place.name}</h3>
                <div className="photo-gallery">
                  {place?.photos.map((photo) => {
                    return <img className="photo" src={photo.getUrl()} />;
                  })}
                </div>
              </div>
            </InfoWindow>
          );
          // Update the Info Window state hook here.
          setInfoWindow(info);
        }
      });
    }
  });
}, []);

然后，您只需将infoWindow状态挂钩放在GoogleMap组件中，以便在提供详细信息时显示Info窗口.

return isLoaded ? (
  <GoogleMap
    mapContainerStyle={containerStyle}
    center={center}
    zoom={15}
    onLoad={onLoad}
    onUnmount={onUnmount}
  >
    {infoWindow ? infoWindow : null}
  </GoogleMap>
) : (
  <></>
);

在经历了这一切之后，它应该看起来像这样:

这里有一个概念验证代码沙箱，你可以try 和发挥周围:https://codesandbox.io/p/sandbox/poi-click-infowindow-tfxjjw

注:使用您自己的API密钥