react-native-maps initialRegion、region 和 animateToRegion 不适用于 iOS 但适用于 Android

Question

我有一个使用 react-native-maps 的 React Native 项目：

    getRegionForCoordinates(points) {
        // points should be an array of { latitude: X, longitude: Y }
        let minX, maxX, minY, maxY;

        var arr = [];
        Object.keys(points).map(key => {
            var point = points[key];
            arr.push([{latitude: point.latitude, longitude: point.longitude}])
        })
        points = arr;

        var first = points[0];
        minX = first[0].latitude;
        maxX = first[0].latitude;
        minY = first[0].longitude;
        maxY = first[0].longitude;

        // calculate rect
        points.map((point) => {
            minX = Math.min(minX, point[0].latitude);
            maxX = Math.max(maxX, point[0].latitude);
            minY = Math.min(minY, point[0].longitude);
            maxY = Math.max(maxY, point[0].longitude);
        });

        const midX   = (minX + maxX) / 2;
        const midY   = (minY + maxY) / 2;
        const deltaX = (maxX - minX);
        const deltaY = (maxY - minY);

        return {
            latitude       : midX,
            longitude      : midY,
            latitudeDelta  : deltaX,
            longitudeDelta : deltaY
        };
    }
   componentDidMount() {
      var event     = this.props.event;
      var mapData   = JSON.parse(event.map);
      var map       = mapData[0];
      var markers = [];
      Object.keys(map.markers).map(key => {
         var marker = map.markers[key];
         var obj = [{ latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng) }];
         markers.push(obj[0]);
      });
      var region = this.getRegionForCoordinates(markers);


      setTimeout(() => {
         this.ref.animateToRegion(region, 1);
      }, 5000)
   }
    renderMap() {
      var event     = this.props.event;
      var mapData   = JSON.parse(event.map);
      var map       = mapData[0];
        return (
            <View>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={mapStyles.map}

               ref={(map) => {
                  this.ref = map
               }}
                    customMapStyle={customMapStyle}

                      key={ `${Date.now()}` }
                    >

                    {
                        map.markers.map(marker => {
                            return (
                                <EventMapMarker marker={marker} navigation={this.props.navigation} />
                            )
                        })
                    }
                </MapView>
            </View>
        )
    }

在此代码中，我尝试根据将在地图上显示的标记为区域设置动画。纬度、经度、纬度三角洲和经度三角洲是正确的，因为它们适用于 Android。

但是，在 iOS 上，它会在模拟器和设备上动画到完全错误的区域。

设置 initialRegion 或 region 似乎没有任何区别。

我尝试了很多不同的东西，比如在 onMapReady 函数中设置动画，使用 setTimeout 来延迟动画，更新/降级 react-native-maps 等等。我不知道这是一个错误还是我在项目中设置错误。

React Native 版本是 0.59.0。

react-native-maps 版本是 0.27.1。

Answer 1

到目前为止，我发现了几种可能的原因，具体取决于您的地图动画到错误区域的确切性质。

目标中心位于地图的左上角。

我不完全确定为什么会发生这种情况。我只知道在创建后的短暂超时后手动设置地图的位置似乎可以阻止它发生。

const [mapStyle, setMapStyle] = useState({ height: 0 });
useEffect(() => {
    setTimeout(() => {
        setMapStyle({});
    }, 2000);
}, []);
return <>
    <MapView provider={PROVIDER_GOOGLE}
        style={[StyleSheet.absoluteFillObject, mapStyle]}  ...

我最好的猜测是这样的：

• 我告诉它将地图与标记对齐。
• 可能由于某种原因，某种形式的竞态条件，它认为现阶段地图的高度为 0x0。
• 因此，它将地图的位置设置为该标记，但没有宽度或高度。
• 然后发生了一些事情，它必须放大地图以满足地图视图的实际宽度和高度，但它锚定在左上角，因此显示区域的中心。

手动重置高度/宽度似乎会踢它并阻止它认为地图的高度是0x0，所以它没有同样的问题。

无论出于何种原因，这个问题对我来说是间歇性的，而且是 iOS 谷歌地图特有的。

地图停留在当前位置，但缩放级别正确

这可能意味着您的纬度增量太大。 指定包含不在 90.0 或 -90.0 之间的任何纬度值的区域似乎会阻止地图动画到该区域。相反，它只会设置缩放级别，将相机留在当前位置。

换句话说，如果abs(latitude) + latitudeDelta / 2 大于90，那么你就会看到这个问题。

始终动画到 180.0 经度

指定大于 180 的经度增量将导致地图始终以 180.0 经度为动画。

Answer 2

如果您设置 provider={PROVIDER_GOOGLE}，它将不起作用。删除它，它甚至可以在 IOS 上运行。不知道为什么。我也面临同样的问题。

使用计时法： https://jakallergis.com/google-maps-in-react-native-part-3-advanced-usage 这对我有用