web-dev-qa-db-ja.com

ReactiOSで機能しないReactNativeマップのマーカークリックイベント

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>
      );
  }
iosgoogle-mapsreactjsreact-nativegoogle-maps-markers
7
BK19

<MapView.Callout>タグに<MapView.Marker>を追加するだけです。カスタムコールアウト-要件に応じてマーカー情報のクリックウィンドウをカスタマイズできます。

marker info window clickにTouchableHighlightを使用したので、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>
14
Anil Ravsaheb Ghodake

アニルの答えに追加するには、マーカーで「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>
9
brickingup

マーカーに「キー」を追加してみてください。

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

テストには「i」を使用するだけです。一意のIDを使用する必要があります

4
psyzinho

onCalloutPress = {this.markerClick（）}は私のために働いた。お役に立てれば。

0
Tanmoy Sarker