Обновите положение маркера на картах при новом изменении положения - React native

Question

Я инициализировал собственную карту реакции с начальной координатой региона.

 <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>

Теперь получение нового местоположения с сервера, у которого есть новые широта и долгота, которые я хочу отображать как новый маркер на моих картах. Я обновил регион с новой широтой и долготой на ononRegionChange.

Но я не могу активировать новую позицию маркера при изменении региона. Может ли кто-нибудь мне помочь?

Answer 1

Если я вас правильно понял, то вы ищете предложение, как переместить маркер в новое положение.

Я предполагаю, что он правильно отображается во время первого рендеринга. Если я прав, то приведенное ниже предложение должно работать для вас, потому что мы используем этот код для той же цели.

// 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

вы должны установить region prop для MapView и обновить его, когда ваши lat и long изменились. ваш объект состояния также должен быть таким:

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

, а вот 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>

Обратите внимание, что вы должны установить как mapRegion, так и markerCoordinate при каждой загрузке данных с сервера.