Как добавить координаты в google-maps-реакции на событие клика пользователя? - PullRequest
Новая
       5

Как добавить координаты в google-maps-реакции на событие клика пользователя?

0 голосов
/ 22 мая 2018

Я пытаюсь добавить маркер на основе того, что пользователь нажимает на карту для google-maps-реакции 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)

1 Ответ

0 голосов
/ 17 февраля 2019

Я решил это, обновив функцию 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);
    });
  }
...