更新时间:2023-10-23 23:47:40
您只需要在<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>