[英]react-google-maps how does one get marker position?
I read the docs and it conveniently outlines the props and methods available. 我阅读了文档,它方便地概述了可用的道具和方法。 Please look here .
请看这里 。
My question is, given the example component here: 我的问题是,此处给出示例组件:
import {withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps";
class MyParentComponentWrapper extends Component {
...
...// inside react component class
mapComponent() {
const MyMapComponent = withScriptjs(withGoogleMap((props) =>{
return (
<GoogleMap
defaultZoom={18}
defaultCenter={{ lat: props.lat, lng: props.lng }}
>
{ props.isMarkerShown && <Marker onPositionChanged={()=>{
// This event will trigger the
// call to update the state where lat and lng will go.
}} draggable position={{ lat: props.lat, lng: props.lng }} /> }
</GoogleMap>
)
}))
return (
<MyMapComponent
lat={this.state.form.location.latitude}
lng={this.state.form.location.longitude}
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${env.google.apiKey}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
isMarkerShown/>
)
}
...
See the onPositionChanged
event? 看到
onPositionChanged
事件吗? I want to update the state of MyParentComponentWrapper
which contains lat and lng, but I have no idea how to call the getPosition()
to get the lat lng values to do so. 我想更新包含lat和lng的
MyParentComponentWrapper
的状态,但是我不知道如何调用getPosition()
来获取lat lng值。 No examples were provided and the documentation looks unclear... Is there a way to call the methods within the Marker
component that I am unaware of? 没有提供示例,文档看起来也不清楚...是否可以调用我不知道的
Marker
组件中的方法? If you know how to do this, can you please provide an example on how to do so? 如果您知道该怎么做,可以请提供一个例子来说明如何做吗?
onPositionChanged
event does not provide the triggered event but you could store a reference to Marker
component via ref
attribute: onPositionChanged
事件不提供触发事件,但是您可以通过ref
属性存储对Marker
组件的ref
:
<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
<Marker position={{ lat: -34.397, lng: 150.644 }} draggable={true} ref={props.onMarkerMounted} onPositionChanged={props.onPositionChanged} />
</GoogleMap>
and then get the position of marker in onPositionChanged
event like this: 然后在
onPositionChanged
事件中获得标记的位置,如下所示:
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
onMarkerMounted: ref => {
refs.marker = ref;
},
onPositionChanged: () => {
const position = refs.marker.getPosition();
console.log(position.toString());
}
})
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.