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或地区似乎没有任何作用。

我尝试了很多不同的事情，例如在onMapReady函数中设置动画，使用setTimeout延迟动画，更新/降级react-native-maps等。我不知道这是错误还是我在项目中设置不正确的内容。

React Native版本是0.59.0。

react-native-maps版本是0.27.1。

Answer 1

如果您设置了provider = {PROVIDER_GOOGLE}，则此方法无效。删除它，即使在IOS上也可以使用。不知道为什么。我正面临着同样的问题。

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

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

1 个答案: