在新的位置变化时更新地图上的标记位置--React原生。

Question

我已经用一个初始化的区域坐标初始化了一个react原生地图，现在从服务器上获取一个新的位置，这个位置有新的经纬度，我想把它作为一个新的标记显示在我的地图上。

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

现在从服务器上获取一个新的位置，它有一个新的经纬度，我想把它作为一个新的标记显示在我的地图上。我已经在onRegionChange上用新的经纬度更新了区域。

但我无法在区域变化时调用新的标记位置。谁能帮我解决这个问题？

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 榰 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 在每次从服务器获取数据时。