IT技术 - 如何点击 Google-Map-React 中的标记？ - 吾爱随笔录

我的实现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>

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

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

我怎样才能简单地点击标记，因为我想在点击后显示其他信息？

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

你可以试试“onClick”吗？

在我的示例（另一个地方：在 google-map-react 上动态添加标记）中，我很AnyReactComponent自然地从作者那里使用，该组件应该有一个声明，并且还应该声明“onChildClick”props，如下所示：

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”（在 Marker 组件上）=> 如果它仍然不起作用，请随时向您的示例添加更多详细信息，从何处导入组件等。

谢谢