[英]How to get address based on lat lang lng in react google map
我有一个使用 react-google-map 插件渲染的地图。 流程是拖动标记并根据标记位置获取纬度、经度和地址。 我只得到纬度和经度。 我怎样才能得到地址?
下面是我的代码。
import React from "react"
import { compose, withProps, lifecycle } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import "./config";
const MyMapComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyDzzi_VBcf2Oef6LTViLU767UPNHlnIze4&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
position: null,
onMarkerMounted: ref => {
refs.marker = ref;
},
onPositionChanged: () => {
const position = refs.marker.getPosition();
console.log(position.toString());
}
})
},
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} draggable={true} ref={props.onMarkerMounted} onPositionChanged={props.onPositionChanged} />}
</GoogleMap>
)
class custommap extends React.PureComponent {
state = {
isMarkerShown: false,
}
render() {
return (
<div>
<MyMapComponent isMarkerShown={true} />
</div>
)
}
}
export default custommap;
任何帮助表示赞赏 <3
我只是想通了。 我使用 react-geocode 插件。
Geocode.fromLatLng(position.lat(), position.lng()).then(
response => {
const address = response.results[0].formatted_address;
console.log(address);
},
error => {
console.error(error);
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.