如何在Google-Map-React中点击标记？

Question

我的GoogleMapReact实现如下所示：

<GoogleMapReact
  key={mapMarkers}
  onGoogleApiLoaded={initGeocoder}
  options={{
    disableDefaultUI: true,
    disableDoubleClickZoon: true,
    draggable: false,
    scrollwheel: false,
    zoomControl: false,
   }}
  distanceToMouse={() => {}}
  bootstrapURLKeys={{ key: myKey }}
  defaultZoom={5}
  defaultCenter={{
    lat: -27,
    lng: 133,
  }}
  yesIWantToUseGoogleMapApiInternals
>
  {mapMarkers.map((marker) => (
   <Marker lat={marker.lat} lng={marker.lng} onChildClick={() => markerClicked(marker)} />
   ))}
</GoogleMapReact>

但是，当我单击标记时，markerClicked中的console.log()永远不会被调用？

const markerClicked = (marker) => {
    console.log('clicked...')
    console.log('The marker that was clicked is', marker)
}

当我想要在单击后显示附加信息时，我如何才能简单地单击标记？

我以为onChildClick会根据文档工作，但什么也没发生

Answer 1

"onChildClick“是有效的道具吗？我对Marker组件不太确定，你在哪里导入的？

你能试试"onClick“吗？

在我的示例(另一个地方：Dynamically Adding Markers on google-map-react)中，我自然地使用了来自作者的AnyReactComponent，应该有一个组件的声明，还应该声明"onChildClick“属性，如下所示：

const AnyReactComponent = ({  img_src, onChildClick }) => <div onClick={onChildClick}><img src={img_src} className="YOUR-CLASS-NAME" style={{}} /></div>;

...

                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                  onChildClick={() => markerClicked(marker)}
                />

我认为你可以尝试在你的案例中使用"onClick“而不是"onChildClick”(在标记组件上) =>，如果它仍然不起作用，请随意在你的示例中添加更多细节，从哪里导入组件等。

谢谢