自定义标记作为React组件-google-maps api

Question

我们正在从google-map-react转换为react-google-maps-api，这意味着更多的本地Google体验。

在进行更改之前，我们能够将自定义标记作为一个反应性组件加载，如下所示：

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

从他们最初的lib google-map-react文档中可以看出：

与默认的Google标记、气球和其他地图组件不同，您可以在地图上呈现出凉爽的动画反应组件。

虽然这很好，但它证明了这个库脱离了本地API.

然而，使用新的标记反应API -google-maps api，React组件是不可能的。他们只期望string | google.maps.Icon | google.maps.Symbol;类型，例如：

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

或

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

我想我可以创建一个真正的定制标记，比如：

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

但没有这样的运气。

解决这个问题的好办法是什么？

Answer 1

也许现在回答有点晚了，但是如果有帮助的话，您可以使用OverlayView组件而不是标记，它的工作原理实际上是一样的，您必须作为子级传递一个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>

这是从doc：https://react-google-maps-api-docs.netlify.app/#overlayview中获取的一个示例