平滑的位置跟踪反应原生地图

问题描述 投票:0回答:1

我建立了一个应用程序,我需要一个位置跟踪(行人)。我顺利地搜索了这个方法。我使用watchPositionAsync,每次用户的位置改变,调用一个函数,在这个函数上,我使用animateToRegion和参数中的新区域和时间。这对于该地区很有效,相机可以顺利地跟踪用户,但是当我到达新区域时地图不会加载,除非我用手指移动拖动地图。

还有更好的方法吗?或者解决问题的方法?

            <MapView
                initialRegion={this.state.currentRegion}
                ref={ref => { this.map = ref; }}
                showsUserLocation={true}
                style={{ flex: 1 }}
                customMapStyle={MAP_STYLE_SAM}
                mapType={(this.state.switchValue) ? 'hybrid':'standard'}
                provider='google'
                onRegionChangeComplete={this.onMapMove}
                loadingEnable={true}
                moveOnMarkerPress={false}
                onPress={this.pressOnMap}
            >

followUser = async () => {
    try {
        await Location.watchPositionAsync(GEOLOCATION_OPTIONS, this.locationChanged);
    }
    catch (error) {
        let status = Location.getProviderStatusAsync();
        if (!status.locationServicesEnabled) {
            alert('Veuillez activer la géolocalisation de votre appareil.');
        }
    }
};

locationChanged = (location) => {
    const region = {
        longitude: location.coords.longitude,
        latitude: location.coords.latitude,
        latitudeDelta: BASIC_LATITUDE_DELTA,
        longitudeDelta: BASIC_LONGITUDE_DELTA
    };
    this.goToRegion(region);
    this.setState({ currentRegion: region });
};

goToRegion = (region) => {
    this.map.animateToRegion(region,1000*2);
};
react-native
1个回答
0
投票

我希望你使用最新版本的地图,因此不推荐使用animateToRegion。让状态更新驱动动画。不要为每个位置更改调用goToRegion。以下是您可能想要做的事情:

componentDidUpdate(prevProps, prevState) {
  const { latitude: newLat, longitude: newLon } = this.state.currentRegion;
  const { latitude: oldLat, longitude: oldLon } = prevState.currentRegion;
  if (oldLat !== newLat || oldLon !== newLon) {
    this._animateCamera();
  }
}

_animateCamera = () => {
  this.map.animateCamera(
    {
      center: this.state.currentRegion, // should be { latitude, longitude }
      pitch: 10,
    },
    { duration: 750 }
  );
};

componentWillUnmount() {
  this.map = null;
}