使用react-google-maps-api将自定义标记作为React组件

我们正在转换自google-map-react https://github.com/google-map-react/google-map-react#readme to react-google-maps-api这意味着更多原生 Google 地图 API 体验。

在更改之前，我们能够将自定义标记作为 React 组件加载，如下所示：

<GoogleMaps>
  <UserPinContainer lat={userLocation.lat} lng={userLocation.lng}>
    <Tidal.Icon type="UserLocation" text="User" />
  </UserPinContainer>
</GoogleMaps>

来自我们原始库的文档google-map-react， 它说：

您可以在地图上渲染很酷的动画反应组件，而不是默认的 Google 地图标记、气球和其他地图组件。

虽然这很棒，但它证明了这个库已经脱离了原生 API...

然而，随着新的标记来自react-google-maps-api的API https://react-google-maps-api-docs.netlify.app/#marker，React 组件是不可能的。他们只期望string | google.maps.Icon | google.maps.Symbol;类型，例如：

<Marker
    icon={{
        path: google.maps.SymbolPath.CIRCLE,
        scale: 7,
    }}
    position={centers[0]}
/>

or

<Marker position={{ lat: userLocation.lat, lng: userLocation.lng }}>
    <Tidal.Icon img type="UserLocation" text="User" />
</Marker>

我想我可以创建一个真正的自定义标记，例如：

const newMarker = new window.google.maps.Marker(MyComponent)

但没有这样的运气。

对此有什么好的解决方案吗？

也许现在回答有点晚了，但如果有帮助的话，您可以使用 OverlayView 组件而不是 Marker，它的工作原理几乎相同，并且您必须将 React 组件作为子组件传递。

  <GoogleMap
    id="overlay-view-example"
    mapContainerStyle={mapContainerStyle}
    zoom={11}
    center={center}
  >
    <OverlayView
      position={center}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <div style={divStyle}>
        <h1>OverlayView</h1>

        <button
          onClick={onClick}
          type='button'
        >
          Click me
        </button>
      </div>
    </OverlayView>
  </GoogleMap>

这是来自文档的示例：https://react-google-maps-api-docs.netlify.app/#overlayview https://react-google-maps-api-docs.netlify.app/#overlayview