在新的位置更改时更新地图上的标记位置 - 反应原生

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

您必须为MapView 设置region 属性，并在您的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。