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

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

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

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


react-native javascript react-native-android react-native-maps
person Harsha pps    schedule 05.05.2020    source источник
comment
Можете поделиться кодом где обновляете новый регион?   -  person Milind Agrawal    schedule 05.05.2020
comment
this.setState ({region: {latitude: myArray [0], longitude: myArray [1]}, вот как я обновляю состояние   -  person Harsha pps    schedule 05.05.2020

Ответы (2)


arrow_upward
2
arrow_downward

Если вы ищете что-то, с помощью которого вы можете переместить маркер в новое положение, попробуйте следующее предложение.

Мы используем тот же подход в нашем проекте, поэтому я надеюсь, что это поможет!

// 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>;
person Milind Agrawal    schedule 05.05.2020

arrow_upward
1
arrow_downward

вы должны установить 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 при каждой выборке данных с сервера.

person Mahdi Tohidloo    schedule 05.05.2020
comment
Привет, спасибо за ответ, но если мне нужно добавить несколько маркеров, как мне использовать один и тот же код? - person Harsha pps; 08.05.2020
comment
Привет. вам просто нужно изменить состояние markerCoordinate на массив и сгенерировать MapView.Marker с этим массивом и передать каждую координату каждому маркеру. (используйте цикл map для создания маркеров) - person Mahdi Tohidloo; 08.05.2020