[英]How do I get the key or coordinates of a Marker in react-native-maps in onPress?
I'm using react-native-maps to render a MapView with several Markers.我正在使用react-native-maps来渲染带有多个标记的 MapView。 I want to perform some actions and animations when a user clicks on a marker.
当用户单击标记时,我想执行一些操作和动画。 For that, I am binding a function (eg, onMarkerPress) to each Marker's onPress.
为此,我将一个函数(例如,onMarkerPress)绑定到每个标记的 onPress。 The problem I'm running into is that I cannot figure out how to find out which marker is triggering the function.
我遇到的问题是我不知道如何找出哪个标记触发了该功能。 Is there any way to get a reference to the marker/identifying key prop?
有没有办法获得对标记/识别键道具的引用? Even the coordinates would do as I can use those to lookup the marker.
甚至坐标也可以,因为我可以使用它们来查找标记。
I found 2 ways to do that.我找到了两种方法来做到这一点。 Most probably the first one is the best choice:
很可能第一个是最好的选择:
1. pass the info you need about the marker as a second argument to the bind of _onMarkerPress as below: 1. 将您需要的关于标记的信息作为第二个参数传递给 _onMarkerPress 的绑定,如下所示:
render() {
return (
<View>
<Text>MySupaFancyMap</Text>
<MapView
style={styles.map}
region={this.state.region}
onRegionChangeComplete={this._onRegionChangeComplete.bind(this)}
>
<MapView.Marker
coordinate={this.state.marker.latlng}
title={this.state.marker.title}
description={this.state.marker.description}
onPress={this._onMarkerPress.bind(this, this.state.marker)}
/>
</MapView>
</View>
);
}
_onMarkerPress (markerData) {
alert(JSON.stringify(markerData));
}
In my case this.state.marker is an object like this:在我的例子中 this.state.marker 是一个这样的对象:
{
latlng: {
latitude: REGION.latitude,
longitude: REGION.longitude
},
title:'MyHouse',
weather: '26 Celsius'
}
2. extract the info you need from the event info like this: 2.从事件信息中提取您需要的信息,如下所示:
<MapView>
//codes here
onPress={this._onMarkerPress.bind(this)}
>
<MapView.Marker
coordinate={this.state.marker.latlng}
/>
<MapView>
and with:与:
_onMarkerPress (mkr) {
console.warn(mkr.nativeEvent.coordinate);
}
I would definitely go with the first solution.我肯定会选择第一个解决方案。 More details about Markers here: https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md
有关此处标记的更多详细信息: https : //github.com/airbnb/react-native-maps/blob/master/docs/marker.md
Note: as a best practice it is recommended that you don't have binds at render.注意:作为最佳实践,建议您在渲染时不要绑定。 Better solutions are to add them in the constructor like this:
更好的解决方案是将它们添加到构造函数中,如下所示:
constructor (props) {
super(props);
this._onMarkerPress = this._onMarkerPress.bind(this);
}
or use the arrow function.或使用箭头功能。 When I wrote the answer I didn't know about this.
当我写答案时,我不知道这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.