Javascript 如何在谷歌地图中基于lat lang lng获取地址
我有一个地图渲染使用反应谷歌地图插件。流程拖动标记并根据标记位置获取lat、lng和地址。我只拿到lat和lng。我怎样才能得到地址 下面是我的代码Javascript 如何在谷歌地图中基于lat lang lng获取地址,javascript,reactjs,google-maps,next.js,react-google-maps,Javascript,Reactjs,Google Maps,Next.js,React Google Maps,我有一个地图渲染使用反应谷歌地图插件。流程拖动标记并根据标记位置获取lat、lng和地址。我只拿到lat和lng。我怎样才能得到地址 下面是我的代码 import React from "react" import { compose, withProps, lifecycle } from "recompose" import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "re
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;
从“React”导入React
从“重新组合”导入{compose,withProps,lifecycle}
从“反应谷歌地图”导入{withScriptjs,withGoogleMap,GoogleMap,Marker}
导入“/config”;
常量MyMapComponent=compose(
用道具({
谷歌地图网址:https://maps.googleapis.com/maps/api/js?key=AIzaSyDzzi_VBcf2Oef6LTViLU767UPNHlnIze4&libraries=geometry,图纸,位置“,
加载元素:,
集装箱运输:,
mapElement:,
}),
生命周期({
组件willmount(){
常量引用={}
这是我的国家({
位置:空,
onMarkerMounted:ref=>{
refs.marker=ref;
},
onPositionChanged:()=>{
const position=refs.marker.getPosition();
console.log(position.toString());
}
})
},
}),
用ScriptJS,
用谷歌地图
)((道具)=>
{props.ismarkersown&}
)
类custommap扩展了React.PureComponent{
状态={
伊斯马克镇:错,
}
render(){
返回(
)
}
}
导出默认自定义地图;
非常感谢您的帮助我刚想出来。我使用react地理代码插件
Geocode.fromLatLng(position.lat(), position.lng()).then(
response => {
const address = response.results[0].formatted_address;
console.log(address);
},
error => {
console.error(error);
}
);