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和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",

​

​

注:在尝试google地图类型之前，我尝试了Apple地图，但问题也在那里。

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在高度的指定方式上有所不同。对于跨平台的应用，需要分别指定缩放级别和高度。

有关如何指定缩放级别的示例，请参阅此处(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属性来定义缩放级别。minZoomLevel和maxZoomLevel控制最小和最大值。

Answer 2

我刚刚注意到，如果你还提供了region，initialCamera会被忽略。请确保提供一个或另一个。