Apple 地图缩放 out/in 基于用户在 React-native-maps 中的半径变化

Question

我需要根据用户在 react-native-maps 中更改的半径来缩放 out/in Apple 地图。

我使用了一个 react-native-slider 来改变 map.based 上的半径，在地图上绘制的滑块值改变半径将被改变。现在有了这个，地图也应该根据半径缩放out/in。我怎样才能以最好的方式实现这一目标？

下面是我的代码：

<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 的增量。当您更新增量时，地图将缩放 in/out。

另一个选项可能是使用 animateToRegion() 来实现更平滑的过渡，但我个人从未使用过它。

Apple 地图缩放 out/in 基于用户在 React-native-maps 中的半径变化

Apple Map zoom out/in based on Radius change by user in React-native-maps

ios

apple-maps

react-native

react-native-maps