我已经用初始区域坐标初始化了一个反应本地地图。
<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上使用新的纬度和经度更新了该区域。
但是我无法在区域更改上调用新的标记位置。有人可以帮我吗?
答案 0 :(得分: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>;
希望这会有所帮助!
答案 1 :(得分:1)
您必须为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
。