如何在用户点击事件中向 google-maps-react 添加坐标？答案

【问题标题】：How to add coordinates to google-maps-react on a user click event?如何在用户点击事件中向 google-maps-react 添加坐标？
【发布时间】：2018-11-01 10:37:25
【问题描述】：

我正在尝试根据用户单击 google-maps-react npm 的地图添加标记。目前，下面的代码将生成标记并将它们添加到this.state = { markers:[ ] }，我想将它们映射到地图组件上。但是，position:event.latLng, 不会注册 lat 和 lng，并且只会创建标记并将其插入到具有 key: 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)

【问题讨论】：

this 是您正在使用的库吗？
是的，浏览了文档，不知道如何处理这个......
你的问题解决了吗？
是的，请看下面我的回复。

标签： reactjs google-maps-api-3 google-maps-markers

【解决方案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);
    });
  }

【讨论】：