React 本机地图，animateCamera 在 ios 上有偏移

Question

我在 Map 组件上使用 "react-native-maps": "0.29.4" 和 google 提供程序。

出于某种原因，仅在某些情况下在 ios 上使用 animateCamera（主要是在刷新应用程序之后，例如在初始获得用户位置 GPS 许可后将 rtl 切换为 ltr）有一个偏移量，应该在中心到左上角

视频显示了使用 handlePressMyLocation 功能时的袋子

const handleAnmiateToRegion = useCallback((center: IMapLocation, zoom: number = undefined) => {
        mapRef.current
            ? mapRef.current.animateCamera({ center, zoom })
            : setTimeout(() => {
                  handleAnmiateToRegion(center, zoom)
              }, 100)
}, [])

const handlePressMyLocation = useCallback(() => {
        handleAnmiateToRegion(location)
}, [location.latitude, location.longitude])

同样，这在 android 上永远不会发生，在 ios 上有时也能正常工作，但如果某个会话有此错误，它会一直发生，并且会一直发生animateCamera 用法（此 handleAnmiateToRegion 有更多情况，如初始对焦 + 缩放或按下某些标记）

有什么想法吗？还尝试将 animateCamera 更改为 animateToRegion，并在 . 之后调用带有 12 位数字的函数而不是 5（如 Geolocation.watchPosition 给出的那样），但同样的错误发生了）

提前致谢！

（如果更多代码会有所帮助，请写在评论中，我会添加）

Answer 1

  <MapView
      provider={PROVIDER_GOOGLE}
      key={this.state.forceRefresh}
      style={styles.gmapView}
      showsUserLocation
      ref={(ref) => (this.mapView = ref)}
      followUserLocation
      showsMyLocationButton
      snappedminZoomLevel={Platform.OS == "ios" ? this.state.zoom : 12}
      /* minZoomLevel={11}
      maxZoomLevel={17} */
      showsMyLocationButton={false}
     
      initialRegion={{
        latitude: latlong.lat || currentLocation.latitude,
        longitude: latlong.lng || currentLocation.longitude,
        latitudeDelta: this.state.latitudeDelta,
        longitudeDelta: this.state.longitudeDelta,
      }}
      
      onRegionChange={(data) =>
        this.setState(
          {
            newLatitude: data.latitude,
            newLongitude: data.longitude,
            zoom:Math.round(Math.log(360 / data.longitudeDelta) / Math.LN10),
            latitudeDelta: data.latitudeDelta, 
            longitudeDelta: data.longitudeDelta,
          },
          () => {
            console.log("data ==> "+JSON.stringify(data))
          }
        )
      }
      onPress={(e) =>{
          this.animate(e)
        } 
      }
    >
     
    </MapView>


animate(e){
let lat = e?.nativeEvent?.coordinate?.latitude + 0.004000;
let long = e?.nativeEvent?.coordinate?.longitude - 0.004000;

let r = {
    latitude: lat,
    longitude: long,
    latitudeDelta: 0.38,//this.state.latitudeDelta,
    longitudeDelta: 0.28,//this.state.longitudeDelta,
};
this.mapView.animateToRegion(r, 300);}

你能试试这个吗？可能对你有帮助

Answer 2

出于某种原因，仅在我获得用户位置后才渲染地图（使用 memo 确保它确实发生并避免不必要的重新渲染）并在 [=12] 上设置 initialRegion 道具=] 解决了问题

React 本机地图，animateCamera 在 ios 上有偏移

React native maps, animateCamera has offset on ios

google-maps

ios

reactjs

react-native

react-native-maps