Question

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

该地图可见，但是我无法执行其他事件操作，例如onClick。该文档和示例无用，因为它们正在使用recompose。但是由于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 = {（事件）=> {props.onMarkerClick（事件）}} 的代码，然后从中的事件获取输出lat和lang handleMarkerClick（event）{console.log（event.latLng.lat（））}

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

1 个答案: