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

Posted 2023-02-21

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

【英文标题】：Perform action when user clicks on map or marker in react-google-maps

【发布时间】：2019-06-18 14:51:11

【问题描述】：

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

地图是可见的，但是我无法执行其他事件操作，例如 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>

【参考方案1】：

您需要在标记组件中更新 onClick = (event) => props.onMarkerClick (event) 之类的代码，然后从 中的事件中获取输出 lat 和 lang handleMarkerClick(event) console.log(event.latLng.lat())