大家好,我已经在 react-native 中创建了一个 mapView,现在我必须在用户当前位置上设置修复标记。我已经使用 navigator.geolocation 获得了当前位置也使用 MapView.Marker 设置了标记最初标记显示正确的位置但是在缩放和收缩时移动
这是我的代码。
getInitialState() {
return {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
},
};
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});
},
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const newRegion = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.onRegionChange(newRegion);
});
},
这里是渲染方法
render() {
return (
<View style={styles.container}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<MapView.Marker coordinate={this.state.region}>
</MapView.Marker>
</MapView>
有人可以帮忙吗? 提前致谢
最佳答案
这是解决方案。这是更新后的代码
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
});
},
);
},
render() {
return (
<View style={styles.container}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<MapView.Marker coordinate={this.state.region} />
</MapView>
问题是 navigator.geolocation.watchPosition 每当它发生变化时它都会更新我的新区域,因此标记会随着区域变化而变化。
关于javascript - MapView.Marker 在缩放和捏合时用户当前位置移动时不稳定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38157354/