使用 react-google-maps 从谷歌地图获取纬度/经度答案

【问题标题】：Getting lat/lng from google map using react-google-maps使用 react-google-maps 从谷歌地图获取纬度/经度
【发布时间】：2020-01-21 10:39:37
【问题描述】：

我有我的地图组件

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>
    );

当用户点击地图时，我希望得到 lat/lng。我在每个答案中找到的最直接的方法是使用 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: ƒ ()

【问题讨论】：

我已从您的问题中删除了您的 API 密钥。请不要在公共站点上共享私有 API 密钥，并确保按照 developers.google.com/maps/… 限制它们

标签： javascript reactjs react-google-maps

【解决方案1】：

试试e.latLng.lat() 或e.latLng.lng() - 注意括号。

我从您的控制台了解到，lat、lng 是 getter 函数而不是对象属性 - 请参阅 this 了解更多信息。

【讨论】：