ネイティブ反応マップに新しいマーカーを作成する

Question

ドラッグマーカーをクリックしてreact-native-mapsマップに新しいマーカーを作成するにはどうすればよいですか？この新しいマーカーは、クリックが発生したときの最初のドラッグ可能マーカーの位置と同じ場所に作成されます。

私は新しいマーカーの位置の座標をe.nativeEvent.coordinateから得ることができますが、この新しいマーカーをどのように作成できますか？

createMarker(e) {  
    console.log(e.nativeEvent.coordinate) # here's the lng/lat for new marker 
} 

render() { 
    <MapView 
     ref='map' 
     initialRegion={{ 
      latitude: LATITUDE, 
      longitude: LONGITUDE, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA, 
     }} 
    > 

     <MapView.Marker 
      coordinate={{latitude: LATITUDE, longitude: LONGITUDE}} 
      onPress={(e) => this.setPickupLocation(e)} 
      draggable 
     ></MapView.Marker> 

    </MapView> 
} 

Answer 1

あなたは、新しいアイテムが含まマーカーの新しい配列をSETSTATEその後、マーカーの配列を描画してこれを行うことができます。

以下のケースでは、新しいものをちょうど近くに設定しているので、少し上に表示されます。

render() { 

    return (
     <View> 
      <Text>MySupaFancyMap</Text> 
      <MapView 
       style={styles.map} 
       region={this.state.region} 
       onRegionChangeComplete={this._onRegionChangeComplete.bind(this)} 
      > 
       {this.state.markers.map((marker, index) => (
        <MapView.Marker key={index} 
         coordinate={marker.latlng} 
         title={marker.title} 
         onPress={this._createMarker.bind(this, marker)} 
        /> 

       ))} 
      </MapView> 
     </View> 
    ); 
} 
_createMarker (markerInfo) { 
    newMarker = { 
     latlng: { 
      latitude: markerInfo.latlng.latitude+0.01, 
      longitude: markerInfo.latlng.longitude+0.01 
     } 
    } 

    markers = this.state.markers.concat([newMarker]); 
    this.setState({markers}); 
}