React Native Maps上的Marker Click事件在React iOS中不起作用 [英] Marker click event on react native maps not working in react ios
问题描述
我尝试通过在MapView.Marker选项卡中调用onPress方法,但无法正常工作.
I have tried by calling onPress method in MapView.Marker Tab, but its not working.
这种跟踪标记点击的方法:
markerClick(){
console.log("Marker was clicked");
}
在render方法中,将Map组件声明为显示map和 在地图上的标记.在onPress方法中,我调用了自定义方法 markerClicked().仍然我没有得到结果.
In render method, Map components are declared to display map and markers on map. In onPress method I have called my custom method markerClicked(). Still I am not getting the result.
render() {
return (
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}
>
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}
onPress={() => this.markerClick()}
/>
))}
</MapView>
</View>
);
}
推荐答案
您只需要在<MapView.Marker>
标记中添加<MapView.Callout>
.
自定义标注-您可以根据需要自定义标记信息点击窗口.
You just need to add <MapView.Callout>
in <MapView.Marker>
tag.
Custom callout- you can customize marker info click window as your requirement.
我已将TouchableHighlight
用于marker info window click
,因此单击custom callout
即可将用户重定向到其他屏幕.
I have used TouchableHighlight
for marker info window click
, so that you can able to redirect user to other screen on click of custom callout
.
<View style={styles.mainContainer}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0,
longitudeDelta: 0.0,
}}>
{this.state.markers.map((marker) => (
<MapView.Marker
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}>
<MapView.Callout tooltip style={styles.customView}>
<TouchableHighlight onPress= {()=>this.markerClick()} underlayColor='#dddddd'>
<View style={styles.calloutText}>
<Text>{marker.title}{"\n"}{marker.description}</Text>
</View>
</TouchableHighlight>
</MapView.Callout>
</MapView.Marker>
))}
</MapView>
</View>
这篇关于React Native Maps上的Marker Click事件在React iOS中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!