Получение широты / долготы с карты google с помощью react-google-maps

У меня есть компонент карты

const MyMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: props.lat, lng: props.lng }}
      onClick={e => console.log(e)}
    >
      {props.isMarkerShown && (
        <Marker position={{ lat: props.lat, lng: props.lng }} />
      )}
      <MarkerClusterer averageCenter enableRetinaIcons gridSize={60}>
        {props.markers.map(marker => (
          <CustomMarker
            key={marker.id}
            marker={marker}

          />
        ))}
      </MarkerClusterer>
    </GoogleMap>
  ))
);
export default MyMapComponent;

И у меня есть компонент моего приложения, который возвращает этот код

  return (
      <div className="container">
        <div className="map">
// myMapComponent imported as Map
          <Map
            onMapClick={this.onMapClick}

            googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `95vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            lat={this.state.lat}
            lng={this.state.lng}
            markers={filteredResturants}

          />
        </div>

      </div>
    );

Я хочу иметь широту / долготу, когда пользователь нажимает на карту. Самый простой способ, который я нашел в каждом ответе, - это иметь событие onClick, а в e вы получаете объект e.latLng. Но я получаю пустой объект latLng. Я попытался разместить событие onClick на myMapComponent, а также на компоненте Map. Вот что я получаю.

.Jm {latLng: _.N, ya: MouseEvent, pixel: _.K, qa: _.K}latLng: _.N {lat: ƒ, lng: ƒ}ya: MouseEvent {isTrusted: false, screenX: 91, screenY: 262, clientX: 91, clientY: 262, …}pixel: _.K {x: 75, y: 246}qa: _.K {x: 128.92420605694446, y: 88.34013104858127}__proto__: Object
latLng: _.N
lat: ƒ ()
lng: ƒ ()

person Mehmood    schedule 21.01.2020    source источник
comment
Я удалил ваш ключ API из вашего вопроса. Пожалуйста, не делитесь закрытыми ключами API на общедоступных сайтах и ​​убедитесь, что вы ограничили их в соответствии с developers.google.com/maps/   -  person Pagemag    schedule 29.01.2020


Ответы (1)


Попробуйте e.latLng.lat() или e.latLng.lng() - обратите внимание на круглые скобки.

Из вашей консоли я понимаю, что lat, lng - это функции получения, а не свойства объекта - см. this для получения дополнительной информации.

person Tasos Bu    schedule 21.01.2020