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设置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。

在新的位置更改上更新地图上的标记位置-React native

2 个答案: