React-native-maps 初始缩放：0 不适用于 iOS

Question

我找不到一种方法让 iOS RN 地图从缩放级别 0 开始或缩小到 0。

const allowScaling = false;

const region = {
  latitude: 0,
  longitude: 0,
  latitudeDelta: 170,
  longitudeDelta: 180,
};

return (
  <View
    style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden',
    }}
  >
    <MapView
      ref={this.setRef}
      onPress={this.onPress}
      onLongPress={this.onLongPress}
      style={{ width: '100%', height: '100%' }}
      zoomControlEnabled
      provider={Platform.OS === 'ios' ? 'google' : 'osmdroid'}
      moveOnMarkerPress={false}
      customMapStyle={[
        {
          stylers: [
            {
              visibility: 'off',
            },
          ],
        },
      ]}
      rotateEnabled={false}
      scrollEnabled={allowScaling}
      pitchEnabled={allowScaling}
      zoomTapEnabled={allowScaling}
      zoomEnabled={allowScaling}
      cacheEnabled={false}
      initialRegion={region}
      onRegionChangeComplete={this.onRegionChange}
      maxZoomLevel={Platform.OS === 'ios' ? maxZoom : Math.max(maxZoom, 10)}
      minZoomLevel={0}
    >
      <UrlTile
        urlTemplate={`${url}/{z}/{x}/{y}/`}
        maximumZ={maxZoom}
        tileSize={256}
      />
      {this.renderMarker()}
    </MapView>
  </View>

完全相同的代码在 Android 中以 Zoom: 0 开头（如附图所示）

我尝试将delta设置maximumZ={0}设置minZoomLevel为maxZoomLevel0 等。

对于 iOS 来说，似乎没有任何方法可以将initialZoom 设置为 0，甚至尝试缩小到 0 也不起作用，如下所示：

minZoomLevel={this.state.minZoomLevel}
onMapReady={()=>{
  this.setState({
    minZoomLevel: 8
  })
}}

依赖项：

"react-native-maps-osmdroid": "^0.26.1-rc1",
"react-native": "0.62.2",

注意：在尝试谷歌地图类型之前，我尝试了苹果地图，问题也存在。

Answer 1

该camera设置控制缩放级别。正如这里提到的https://github.com/react-native-community/react-native-maps/blob/dbf746d66ca1b42f2beb790bfbf4c0e3a74f3279/docs/mapview.md

type Camera = {
    center: {
       latitude: number,
       longitude: number,
   },
   pitch: number,
   heading: number

   // Only on iOS MapKit, in meters. The property is ignored by Google Maps.
   altitude: number.

   // Only when using Google Maps.
   zoom: number
}

请注意，使用相机时，iOS 上的 MapKit 和 Google 地图在指定高度的方式上有所不同。对于跨平台应用程序，需要分别指定缩放级别和高度。

可以在此处找到如何指定缩放级别的示例（https://github.com/react-native-community/react-native-maps/blob/master/example/examples/CameraControl.js）。请参阅下面同一示例中的一些代码：

<MapView
          provider={this.props.provider}
          ref={ref => {
            this.map = ref;
          }}
          style={styles.map}
          initialCamera={{
            center: {
              latitude: LATITUDE,
              longitude: LONGITUDE,
            },
            pitch: 45,
            heading: 90,
            altitude: 1000,
            zoom: 10,
          }}
        />

如上所述，对于谷歌地图，请使用zoomprop 来定义缩放级别。和minZoomLevel控制maxZoomLevel最小值和最大值。