Apple Map根据用户在React原生地图中对Radius的更改缩小/缩小

Question

我需要根据用户在react原生地图中的半径变化缩小/缩小Apple地图。

我使用了react原生滑块来更改地图上的半径。基于滑块值更改，地图上绘制的半径将更改。现在，地图也应该根据半径缩小/缩小。我怎样才能以最好的方式做到这一点？

以下是我的代码：

<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,
});
};

Answer 1

您实际上可以在MapView:的区域下拥有latitudeData和longitudeData属性

const [delta, setDelta] = useState(some_initial_value);
region={{
latitude: xx,
longitude: xx,
latitudeDelta: delta,
longitudeDelta: delta
}}

我要做的是创建一个函数，在给定userRadius的情况下计算delta。更新增量时，地图将放大/缩小。

另一种选择可能是使用animateToRegion((来实现更平滑的过渡，但就我个人而言，我从未使用过它