如何在 onPress 的 react-native-maps 中获取标记的键或坐标？

Question

我正在使用 react-native-maps 来呈现带有多个标记的 MapView。我想在用户点击标记时执行一些动作和动画。为此，我将一个函数（例如，onMarkerPress）绑定到每个标记的 onPress。我运行遇到的问题是我无法弄清楚如何找出哪个标记触发了该功能。有什么方法可以获取对 marker/identifying 键道具的引用吗？即使是坐标也可以，因为我可以使用它们来查找标记。

Answer 1

我找到了 2 种方法。很可能第一个是最好的选择：

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));
}

在我的例子中 this.state.marker 是一个像这样的对象：

       {
            latlng: {
                latitude: REGION.latitude,
                longitude: REGION.longitude
            },
            title:'MyHouse',
            weather: '26 Celsius'

        }

2。从事件信息中提取您需要的信息，如下所示：

 <MapView>
//codes here
onPress={this._onMarkerPress.bind(this)}
>
 
<MapView.Marker
       coordinate={this.state.marker.latlng}         
/>
<MapView>

并与：

_onMarkerPress (mkr) {
    console.warn(mkr.nativeEvent.coordinate);
}

我肯定会选择第一个解决方案。有关标记的更多详细信息： https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md

注意：作为最佳实践，建议您在渲染时不要绑定。更好的解决方案是像这样将它们添加到构造函数中：

constructor (props) {
  super(props);
  this._onMarkerPress = this._onMarkerPress.bind(this);
}

或者使用箭头函数。我写答案的时候不知道这个。

如何在 onPress 的 react-native-maps 中获取标记的键或坐标？

How do I get the key or coordinates of a Marker in react-native-maps in onPress?

javascript

events

react-native

react-native-maps