我已经尝试通过在MapView.Marker选项卡中调用onPress方法,但是它不起作用。
这种跟踪标记点击的方法:
markerClick(){ console.log("Marker was clicked"); }
在render方法中,声明了Map组件以在地图上显示地图和标记。在onPress方法中,我调用了自定义方法markerClicked()。仍然我没有得到结果。
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.Callout>的<MapView.Marker>标签。自定义标注-您可以根据需要自定义标记信息点击窗口。
<MapView.Callout>
<MapView.Marker>
我已经习惯TouchableHighlight了marker info window click,这样您就可以在单击时将用户重定向到其他屏幕custom callout。
TouchableHighlight
marker info window click
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>