Как узнать широту и долготу места реагируют гугл карты?

Question

У меня есть два входа для получения широты и долготы от пользователя. когда пользователь вводит долготу и широту, место отображается на карте. Теперь то, что я хочу сделать, это. Я хочу показать долготу и широту внутри ввода, когда пользователь нажимает на место на карте. когда пользователь нажимает на карту, маркер также должен появляться в месте, выбранном пользователем.

компонент карты

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

class MapContainer extends Component {

  constructor(props) {
    super(props);

    this.state = {

    };
  }

  render() {
    const style = {
      width: '22%',
      height: '40%'
    }
    return (
      <Map
        style={style}
        google={this.props.google}
        zoom={this.state.zoom}
        center={{
          lat: this.props.latitudeForMap,
          lng: this.props.longitudeForMap 
        }}
      >

        <Marker
        position={{lat: this.props.latitudeForMap, lng: this.props.longitudeForMap}}
         />




      </Map>

    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("api key")
})(MapContainer)

компонент, который имеет входные данные

             <Form.Item {...formItemLayout} label="Latitude">
                        {getFieldDecorator('latitude', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input the Latitude!',
                                },
                                {
                                    pattern: '^[.0-9]+$',
                                    message: 'This input is not valid!',
                                }
                            ],
                        })(
                            <Input
                                placeholder="Enter the latitude"
                                name="latitude"
                                onBlur={(element => { this.setState({ latitude: element.target.value }) })}

                            />
                        )

                        }

                    </Form.Item>

                    <Form.Item {...formItemLayout} label="Longitude">
                        {getFieldDecorator('longitude', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input the Longitude!',
                                },
                                {
                                    pattern: '^[.0-9]+$',
                                    message: 'This input is not valid!',
                                }
                            ],
                        })(
                            <Input
                                placeholder="Enter the Longitude"
                                name="longitude"
                                onBlur={(element => { this.setState({ longitude: element.target.value }) })}

                            />
                        )

                        }

                    </Form.Item>

<MapContainer
    longitudeForMap={(this.state.longitude !== '') ? this.state.longitude : -73.935242}
    latitudeForMap={(this.state.latitude !== '') ? this.state.latitude :40.730610 }
/>

Answer 1

Вам необходимо добавить прослушиватель событий для карты. Инструкции приведены по https://developers.google.com/maps/documentation/javascript/events#EventArguments.

. Также приведен пример кода по адресу https://developers.google.com/maps/documentation/javascript/examples/event-arguments.