Javascript 使用react google maps从google map获取lat/lng
我有我的地图组件Javascript 使用react google maps从google map获取lat/lng,javascript,reactjs,react-google-maps,Javascript,Reactjs,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 &a
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;
尝试e.latLng.lat()
或e.latLng.lng()
-注意括号
我从您的控制台了解到,lat、lng是getter函数而不是对象属性-有关更多信息,请参阅。我已从您的问题中删除了API密钥。请不要在公共站点上共享私有API密钥,并确保按照
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>
);
.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: ƒ ()