在新的 position 更改上更新地图上的标记 position - 反应原生

Question

I have initialized a react native map with an initial region co-ordinate.

 <MapView
     style={{ ...styles.map, marginTop: this.state.marginTop }}
     initialRegion={this.state.region}
     showsUserLocation={true}
     followsUserLocation={true}
     onMapReady={this.onMapReady}
     onRegionChangeComplete={this.onRegionChange}         
     >
     <MapView.Marker
     coordinate={this.state.region}
     title={"Your location"}
     draggable                  
     />
 </MapView>

Now fetching a new location from the server, which has a new latitude and longitude, which I want to display as a new marker on my maps. I have updated the region with new latitude and longitude on ononRegionChange.

But I'm unable to invoke the new marker position on the region change. Can anyone help me out here?

Answer 1

If you are looking for something using which you can move the marker to new position then give the below suggestion a try.

We are using the same approach in our project, so I hope this would help!

// When updating region
const coordinate = new MapView.AnimatedRegion({
  latitude: newRegion.latitude,
  longitude: newRegion.longitude,
  latitudeDelta: 0,
  longitudeDelta: 0,
});

this.setState({ region: newRegion, coordinate }, () => {
  if (!!this._markerRef) {
    coordinate.timing({
      latitude,
      longitude,
      duration: MARKER_ANIMATION_DURATION,
    }).start();
  }
})

// rendering MapView
<MapView
  style={[styles.map, { marginTop: this.state.marginTop }]}
  initialRegion={this.state.region}
  showsUserLocation={true}
  followsUserLocation={true}
  onMapReady={this.onMapReady}
  onRegionChangeComplete={this.onRegionChange}
>
  <MapView.Marker.Animated
    ref={ref => {this._markerRef = ref;}}
    coordinate={this.state.coordinate}
    title="Your location"
    draggable
  />
</MapView>;

Answer 2

you have to set region prop for MapView and update it when your lat and long changed. your state object should be an object like this as well:

this.state = { 
   mapRegion: {
     latitude: 14.343,
     longitude: 1600,
     latitudeDelta: 0.002,
     longitudeDelta: 0.0002,
   },
   markerCoordinate: {
     latitude: 14.343,
     longitude: 1600,
    }
}

and here is the MapView

 <MapView
     style={{ ...styles.map, marginTop: this.state.marginTop }}
     initialRegion={this.state.mapRegion}
     region={this.state.mapRegion}
     showsUserLocation
     followsUserLocation
     onMapReady={this.onMapReady}
     onRegionChangeComplete={this.onRegionChange}         
   >
     <MapView.Marker
       coordinate={this.state.markerCoordinate}
       title={"Your location"}
       draggable                  
     />
 </MapView>

Note that you have to set both mapRegion and markerCoordinate on every data fetching from the server.