javascript - 在新位置更改时更新 map 上的标记位置 - React Native

Question

我已经用初始区域坐标初始化了一个 react native map 。

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

现在从服务器获取一个新位置，该位置具有新的纬度和经度，我想将其显示为 map 上的新标记。我已在 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>;