且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

React Native Maps上的Marker Click事件在React iOS中不起作用

更新时间: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>