Reactjs gmaps标记范围问题的onPositionChanged处理程序
我尝试更新react google maps包装器的可拖动标记的当前位置,并将这些值传递回父级。Reactjs gmaps标记范围问题的onPositionChanged处理程序,reactjs,google-maps,google-maps-api-3,google-maps-markers,react-google-maps,Reactjs,Google Maps,Google Maps Api 3,Google Maps Markers,React Google Maps,我尝试更新react google maps包装器的可拖动标记的当前位置,并将这些值传递回父级。 我的问题是,在onMarkerPositionChange中,这是FindLocationMarker类或标记本身,具体取决于调用函数的方式。 onpositionchange={()=>this.onMarkerPositionChange()}是我的另一个选择 我需要两者,位置标记和道具中功能的类。 在提供的示例中,此是标记。 evt未定义,我知道 如何为函数同时提供类范围和标记 class F
我的问题是,在
onMarkerPositionChange
中,这是FindLocationMarker类或标记本身,具体取决于调用函数的方式。
onpositionchange={()=>this.onMarkerPositionChange()}
是我的另一个选择
我需要两者,位置标记和道具中功能的类。
在提供的示例中,此
是标记。
evt
未定义,我知道
如何为函数同时提供类范围和标记
class FindLocationMarker extends Component {
onMarkerPositionChange = (evt) => {
console.log(evt);
let lat = this.position.lat();
let lng = this.position.lng();
this.props.handleMarkerPositionChange(lat, lng);
}
render() {
return (
<div>
<Marker
position={this.props.position}
draggable
onPositionChanged={this.onMarkerPositionChange}
/>
</div>
)
}
}
export default FindLocationMarker;
类FindLocationMarker扩展组件{
onMarkerPositionChange=(evt)=>{
控制台日志(evt);
设lat=this.position.lat();
设lng=this.position.lng();
本.道具.手钉位置变化(lat,lng);
}
render(){
返回(
)
}
}
导出默认FindLocationMarker;
在下面的长时间讨论之后,我决定用Marker.jsx组件更新我对未来问题的答案
如果要获取标记位置onPositionChange,需要:
将标记存储在参考中
收听onPositionChange事件,然后访问参考中标记的位置
例如:
onPositionChanged() {
const position = this.marker.getPosition();
// do something with position
}
render() {
return <Marker
onPositionChanged={ ::this.onPositionChanged }
ref={input => this.marker = input}
/>
}
onPositionChanged(){
const position=this.marker.getPosition();
//对位置做点什么
}
render(){
返回this.marker=input}
/>
}
对不起,我无法让它工作。传递标记的唯一方法是在onpositionchange
中使用非箭头函数,并将onMarkerPositionChange
定义为非箭头函数。然后,当我将this
绑定到它时,标记对象将被覆盖。参数未定义,始终(!!)标记组件是您的吗?标记是问题所在,而不是您的实现。它的行为很奇怪……不,不是。看一看:好吧,这个lib看起来很混乱,对我来说是反作用的,但是好吧。。。库正在使用此库:。在位置更改时触发的事件是位置更改。API文档说没有更多的参数应用于函数-这就是我们观察到的。所以我仔细研究了Map.jsx本身,它有一个广泛的getter API。您应该测试的是getPosition()。如何?使用ref={input=>this.marker=input}呈现地图,并在onMarkerPositionChange中尝试this.marker.getPosition(),感谢Tobias,效果非常好。我发现了一个类似但稍微复杂的解决方案。但是你的方法更干净,我更喜欢这个。穆查斯·格雷西亚斯