如何解决用户在React-native-maps中根据半径更改对Apple Map进行缩小/放大
我需要根据用户在react-native地图中的半径变化来缩小/放大Apple地图。
我使用了react-native-slider来更改地图上的半径。基于滑块值的更改,将改变地图上绘制的半径。现在,还应该根据半径缩小/放大地图。如何以最佳方式实现这一目标?
下面是我的代码:
<MapView
minZoomLevel={this.state.minZoomLevel}
maxZoomLevel={this.state.maxZoomLevel}
moveOnMarkerPress={true}
//provider={PROVIDER_GOOGLE}
style={styles.mapView}
showsUserLocation={true}
followsUserLocation={false}
region={this.state.region}
loadingEnabled={true}
>
<Marker coordinate={this.state.markers.latlng} />
<Circle
center={this.state.markers.latlng}
radius={userRadius}
strokeColor={colors.black}
/>
</MapView>
calculateMapZoomLevel = () => {
const { userRadius } = this.state;
var zoomLevel = 11;
var compRadius = userRadius + userRadius / 2;
var scale = compRadius / 500;
zoomLevel = Math.round(16 - Math.log(scale) / Math.log(2));
return zoomLevel;
};
handleSliderValueChange = (value) => {
const rondedRadius = Math.round(value * 1609);
const sliderValue = Math.round(value);
const radiusInMiles = sliderValue;
this.setState({
userRadius: rondedRadius,sliderValue,radiusInMiles,});
const zoomLevel = this.calculateMapZoomLevel();
this.setState({
maxZoomLevel: zoomLevel,});
};
解决方法
您实际上可以在MapView的区域下具有latitudeData和longitudeData属性:
const [delta,setDelta] = useState(some_initial_value);
region={{
latitude: xx,longitude: xx,latitudeDelta: delta,longitudeDelta: delta
}}
我要做的是创建一个函数,计算给定userRadius的增量。更新三角洲时,地图将放大/缩小。
另一个选择可能是使用animateToRegion()进行更平滑的过渡,但我个人从未使用过它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。