使用react-google-maps从谷歌地图获取lat/lng

Question

我有我的地图组件

\n\n

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

\n\n

我的应用程序组件返回此代码

\n\n

  return (\n      <div className="container">\n        <div className="map">\n// myMapComponent imported as Map\n          <Map\n            onMapClick={this.onMapClick}\n\n            googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"\n            loadingElement={<div style={{ height: `100%` }} />}\n            containerElement={<div style={{ height: `95vh` }} />}\n            mapElement={<div style={{ height: `100%` }} />}\n            lat={this.state.lat}\n            lng={this.state.lng}\n            markers={filteredResturants}\n\n          />\n        </div>\n\n      </div>\n    );\n

\n\n

当用户单击地图时，我希望获得纬度/经度。我在每个答案中发现的最直接的方法是使用 onClick 事件，并在 e 中获得 e.latLng 对象。但我一直得到空的 latLng 对象。我尝试将 onClick 事件放在 myMapComponent 以及 Map 组件上。\n这就是我得到的。

\n\n

.Jm\xc2\xa0{latLng: _.N, ya: MouseEvent, pixel: _.K, qa: _.K}latLng: _.N\xc2\xa0{lat: \xc6\x92, lng: \xc6\x92}ya: MouseEvent\xc2\xa0{isTrusted: false, screenX: 91, screenY: 262, clientX: 91, clientY: 262,\xc2\xa0\xe2\x80\xa6}pixel: _.K\xc2\xa0{x: 75, y: 246}qa: _.K\xc2\xa0{x: 128.92420605694446, y: 88.34013104858127}__proto__: Object\n

\n\n

latLng: _.N\nlat: \xc6\x92 ()\nlng: \xc6\x92 ()\n

\n

Answer 1

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

我从你的控制台了解到的是 lat、lng 是 getter 函数而不是对象属性 - 请参阅此以获取更多信息。