React-native-maps 初始缩放 : 0 not working for iOS

Question

我找不到使 iOS RN map 以缩放级别 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和 maxZoomLevel为 0 等
似乎没有什么可以使 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",

注意:在尝试谷歌地图类型之前，我尝试了苹果 map ，问题也在那里。

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
}

Note that when using the Camera, MapKit on iOS and Google Maps differin how the height is specified. For a cross-platform app, it isnecessary to specify both the zoom level and the altitude separately.

可以在此处找到如何指定缩放级别的示例 ( 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,
          }}
        />

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