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

问题描述

我找不到让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>

完全相同的代码以zoom开头：Android中为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",

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

解决方法

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和Google Maps上的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,}}
        />

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

,

请注意，如果您还提供initialCamera，则会忽略region。确保提供其中一个。