reactjs - 如何将坐标添加到 google-maps-react 用户点击事件？

Question

我正在尝试根据用户点击 google-maps-react npm 的 map 添加标记。目前，下面的代码将生成标记并将它们添加到 this.state = { markers:[ ] } 中，我想将它们映射到 map 组件上。但是，position:event.latLng, 不会注册纬度和经度，并且只会创建标记并将其插入到具有 键的状态:Date.now() 和 defaultAnimation: 2。代码下方:

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer2 extends Component {
  constructor(props){
    super(props);

    this.state={
      lat:null,
      lng:null,
      markers:[]
    }
  }

  componentDidMount(){
    navigator.geolocation.getCurrentPosition(position=>
      this.setState({
        lat:position.coords.latitude,
        lng:position.coords.longitude,
      }));
   }

   mapClicked = (event) =>{
     const { markers } = this.state;
     this.setState({
       markers:[
         {
           position:event.latLng,
           key: Date.now(),
           defaultAnimation: 2,
         },
         ...markers
       ]

     })
   }

  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>
    }
    const style = {
    width: '100%',
    height: '100vh'
  }
    return (
      <Map
       google={this.props.google}
       zoom={11}
       style={style}
       initialCenter={{
          lat: this.state.lat,
          lng: this.state.lng
       }}
       center={{
          lat: this.state.lat,
          lng: this.state.lng
       }}
       onClick={this.mapClicked}
       >
       <Marker
         title={'Geolocation'}
         position={{
           lat:this.state.lat,
           lng:this.state.lng,
         }}
       />


      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ('AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA')
})(MapContainer2)

Answer 1

我通过使用以下内容更新函数 mapClicked 解决了这个问题:

mapClicked = (mapProps, map, event) => {
    const { markers } = this.state;
    const lat = event.latLng.lat();
    const lng = event.latLng.lng();
    let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=myapikey`
    axios.get(url).then(response => {
        this.setState({
          googleReverseGeolocation:response.data.results[0].formatted_address,
          markers:[{position:{lat:event.latLng.lat(),lng:event.latLng.lng()}}, ...markers],
          latClick:lat,
          lngClick:lng
        });
       this.props.onMapClickChange(lat, lng, response.data.results[0].formatted_address);
    });
  }