用户在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（）进行更平滑的过渡，但我个人从未使用过它。