时间戳

首页 > 解决方案 > 如何点击 Google-Map-React 中的标记？

javascript - 如何点击 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会根据文档工作，但什么也没发生

标签： javascriptreactjsgoogle-map-react

解决方案

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

你可以试试“onClick”吗？

在我的示例中（另一个地方：在 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”=>如果它仍然无法正常工作，请随时为您的示例添加更多详细信息，从哪里导入组件等。

谢谢

推荐阅读