当用户点击 react-google-maps 中的地图或标记时执行操作

Question

我正在尝试使用 react-google-maps 包在我的 React 项目中实现 google 地图。

地图可见，但我无法执行其他事件操作，例如 onClick。文档和示例没有用，因为它们使用的是重组。然而，由于在 React v16 中释放了钩子，不再需要重构。

下面是代码，请指出我做错了什么。关于如何编写基于钩子的代码而不是重构的技巧也将非常有帮助。另外我是 React 新手，所以可能犯了明显的错误

function handleMarkerClick() {
  console.log("function called");
}

const MyMapComponent = withScriptjs(
  withGoogleMap(props => ( <GoogleMap defaultZoom = {13} defaultCenter = {{ lat: 19.1998, lng: 72.8426 }}> 
  {props.isMarkerShown && ( <Marker position = { { lat: 19.1998, lng: 72.8426 }} onClick = { props.onMarkerClick } />)} 
  </GoogleMap>
  ))
);

function Register() {
  return ( <Wrapper>
      <MyMapComponent isMarkerShown = { true }
      googleMapURL = "https://maps.googleapis.com/maps/api/js?key=*******&v=3.exp&libraries=geometry,drawing,places"
      loadingElement = { < div style = {
          {
            height: `100%`
          }
        }
        />}
        containerElement = { < div style = {
            {
              height: `100vh`
            }
          }
          />}
          mapElement = { < div style = {
              {
                height: `100%`
              }
            }
            />} / >
             < /
            Wrapper>
          );
        }

export default Register;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您需要更新标记组件中的代码，例如 onClick = { (event) => { props.onMarkerClick (event) } } 然后您将获得输出纬度和lang 来自 handleMarkerClick(event) { console.log(event.latLng.lat())}

中的事件

当用户点击 react-google-maps 中的地图或标记时执行操作

Perform action when user clicks on map or marker in react-google-maps

google-maps

reactjs

recompose

react-google-maps

react-hooks