react-native地图上的标记单击事件在react ios 中不起作用

IT技术 ios google-maps reactjs react-native google-maps-markers
2021-04-12 02:07:43

我曾尝试通过在 MapView.Marker Tab 中调用 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>
      );
  }
5个回答

你只需要添加<MapView.Callout>的<MapView.Marker>标签。自定义标注 - 您可以根据需要自定义标记信息点击窗口。

我已经使用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>
我把 onPress 放在 MapView.Callout 上，它工作正常。
2021-05-24 02:07:43
谢谢。当我<MapView.Callout>在地图标记视图中添加时它正在工作。
2021-06-13 02:07:43

要添加到 Anil 的答案中，您可以使用 Marker 上的“onCalloutPress”回调来处理标注按下事件，这样标注中就不需要 TouchableHighlight：

<MapView.Marker
   coordinate={marker.coordinate}
   title={marker.title}
   description={marker.description}
   onCalloutPress={this.markerClick}>
   <MapView.Callout tooltip style={styles.customView}>
       <View style={styles.calloutText}>
          <Text>{marker.title}{"\n"}{marker.description}</Text>
       </View>
   </MapView.Callout>
</MapView.Marker>
如果我们在 1 中有 2 个按钮Callout怎么办？
2021-06-12 02:07:43
@TomSawyer 您是否设法找到了答案？
2021-06-21 02:07:43

尝试在标记中添加“键”：

{this.state.markers.map((marker, i) => (
    <MapView.Marker
      key={i}
      coordinate={marker.coordinate}
      title={marker.title}
      description={marker.description}
      onPress={() => this.markerClick()}
    />
 ))}

只需使用 'i' 进行测试，您应该使用唯一的 id

很好的答案，这将被接受。因为接受的答案不起作用
2021-05-28 02:07:43
i是一个唯一的 id ……而且 key 必须是一个字符串。i是一个整数/数字。你需要做'' + i
2021-06-02 02:07:43
在 react native ios 中，您是否有任何其他与Marker click相关的解决方案。我在组件中添加了元素，但仍然没有点击标记工作。key={i}<MapView.Marker/>
2021-06-04 02:07:43
这对我不起作用。我使用了与您上面提到的相同的代码。
2021-06-09 02:07:43

onCalloutPress={this.markerClick()} 为我工作。希望这可以帮助。

<MapView.Marker key={index} coordinate={marker.coordinate}
    title={marker.title}
    description={marker.description}
    onPress={e => this.onPressMarker(e,index)}
>
其它你可能感兴趣的问题
上一篇如何使用 csurf 保护我的 react app api？ 下一篇如何创建类似 Twitter 的个人资料布局？