Android 如何使用react native map正确跟踪当前用户

我正在获取当前用户的纬度和经度，并在地图上显示它们。但当我开始跟踪用户时，它有时会显示错误，如图所示

但在emulator上运行完全正常。这种行为仅在真实设备上发生

但有时它会正常工作，如图所示

我不明白为什么会发生这种情况。我的代码在下面

import React, { Component } from "react";
import {
  StyleSheet,
  PermissionsAndroid,
  View,
  Text,
  Image
} from "react-native";
import { AskPermission } from "../../components/AskPermissions";
import MapView, { PROVIDER_GOOGLE, Marker, Polyline } from "react-native-maps";
import haversine from "haversine";

class TrackCurrentUser extends Component {
  state = {
    region: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0.0922, // must give some valid value
      longitudeDelta: 0.0421 // must give some valid value
    },
    error: "",
    routeCoordinates: [],
    distanceTravelled: 0, // contain live distance
    prevLatLng: {} // contain pass lat and lang value
  };

  //   getLocation Permission and call getCurrentLocation method
  componentDidMount() {
    const permission = PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION;
    AskPermission(permission);
    this.getCurrentLocation();
  }

  //   getting the current Location of a user...
  getCurrentLocation = () => {
    navigator.geolocation.watchPosition(
      position => {
        const { latitude, longitude } = position.coords;
        const { routeCoordinates } = this.state;
        const newCoordinate = { latitude, longitude };

        let region = {
          latitude: parseFloat(position.coords.latitude),
          longitude: parseFloat(position.coords.longitude),
          latitudeDelta: 5,
          longitudeDelta: 5
        };

        this.setState({
          initialRegion: region,
          region: region,
          routeCoordinates: routeCoordinates.concat([newCoordinate]),
          distanceTravelled:
            this.state.distanceTravelled + this.calcDistance(newCoordinate),
          prevLatLng: newCoordinate
        });
      },
      error => console.log(error),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        distanceFilter: 1
      }
    );
  };

  //   animate to current user Location
  goToInitialLocation = () => {
    let initialRegion = Object.assign({}, this.state.initialRegion);
    initialRegion["latitudeDelta"] = 0.005;
    initialRegion["longitudeDelta"] = 0.005;
    this.mapView.animateToRegion(initialRegion, 2000);
  };

  //   lat & lng for Marker
  getMapRegion = () => ({
    latitude: this.state.region.latitude,
    longitude: this.state.region.longitude
  });

  //   calculate the total distance
  calcDistance = newLatLng => {
    // console.warn("Method Called");
    const { prevLatLng } = this.state;
    return haversine(prevLatLng, newLatLng) || 0;
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <MapView
          style={{ flex: 0.9 }}
          provider={PROVIDER_GOOGLE}
          region={this.state.mapRegion}
          followUserLocation={true}
          ref={ref => (this.mapView = ref)}
          zoomEnabled={true}
          showsUserLocation={true}
          onMapReady={this.goToInitialLocation}
          initialRegion={this.state.initialRegion}
        >
          <Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} />
          <Marker coordinate={this.getMapRegion()} title={"Current Location"}>
            <Image
              source={require("../../images/car.png")}
              style={{ height: 35, width: 35 }}
            />
          </Marker>
        </MapView>
        <View style={styles.distanceContainer}>
          <Text>{parseFloat(this.state.distanceTravelled).toFixed(2)} km</Text>
        </View>
      </View>
    );
  }
}

export default TrackCurrentUser;

const styles = StyleSheet.create({
  distanceContainer: {
    flex: 0.1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent"
  }
});

import React，{Component}来自“React”；
进口{
样式表，
许可证Sandroid，
看法
文本，
形象
}从“反应本族语”；
从“../../components/AskPermissions”导入{AskPermission}”；
从“react native maps”导入MapView，{PROVIDER_GOOGLE，Marker，Polyline}；
从“哈弗森”进口哈弗森；
类TrackCurrentUser扩展组件{
状态={
地区：{
纬度：0，
经度:0,，
latitudeDelta:0.0922，//必须给出一些有效值
longitudeDelta:0.0421//必须提供一些有效值
},
错误：“”，
路线坐标：[]，
距离旅行：0，//包含活动距离
prevLatLng:{}//包含pass lat和lang值
};
//getLocation权限和调用getCurrentLocation方法
componentDidMount（）{
const permission=PermissionsAndroid.PERMISSIONS.ACCESS\u rough\u位置；
AskPermission（许可）；
这是.getCurrentLocation（）；
}
//正在获取用户的当前位置。。。
getCurrentLocation=（）=>{
navigator.geolocation.watchPosition(
位置=>{
常数{纬度，经度}=position.coords；
const{routeCoordinates}=此.state；
常数newCoordinate={纬度，经度}；
让区域={
纬度：parseFloat（位置坐标纬度），
经度：parseFloat（position.coords.longitude），
latitudeDelta:5，
长德尔塔：5
};
这是我的国家({
地区:地区,，
地区:地区,，
线路坐标：线路坐标.concat（[newCoordinate]），
距离：
this.state.DistanceTraveled+this.calcDistance（新坐标），
prevLatLng:newCoordinate
});
},
error=>console.log（错误），
{
EnableHighAccurance:正确，
超时：20000，
最大值：1000，
距离过滤器：1
}
);
};
//设置动画到当前用户位置
goToInitialLocation=（）=>{
让initialRegion=Object.assign（{}，this.state.initialRegion）；
初始区域[“latitudeDelta”]=0.005；
初始区域[“longitudeDelta”]=0.005；
这个.mapView.animateToRegion（initialRegion，2000）；
};
//标记器用lat和lng
getMapRegion=（）=>({
纬度：this.state.region.latitude，
经度：this.state.region.longitude
});
//计算总距离
calcDistance=newLatLng=>{
//console.warn（“调用的方法”）；
const{prevLatLng}=this.state；
返回哈弗斯林（prevLatLng，newLatLng）| | 0；
};
render（）{
返回(
（this.mapView=ref）}
zoomEnabled={true}
showsUserLocation={true}
onMapReady={this.gotoinitialocation}
initialRegion={this.state.initialRegion}
>
{parseFloat（this.state.distancetraveled）.toFixed（2）}km
);
}
}
导出默认TrackCurrentUser；
const styles=StyleSheet.create({
距离容器：{
弹性系数：0.1，
辩护内容：“中心”，
对齐项目：“中心”，
背景色：“透明”
}
});

---

等待您的解决方案来解决此问题。

几个月后，我再次开始处理地图，并开始查看我的旧代码以再次找到问题，幸运的是，这次我找到了问题

问题

问题出在

onMapReady

onMapReady={this.goToInitialLocation}

  //   animate to current user Location
  goToInitialLocation = () => {
    let initialRegion = Object.assign({}, this.state.initialRegion);
    initialRegion["latitudeDelta"] = 0.005;
    initialRegion["longitudeDelta"] = 0.005;
    this.mapView.animateToRegion(initialRegion, 2000);
  };

解决方案

我删除了这段代码和getCurrentLocation函数中的以下行

this.map.animateToRegion(region, 1000);

现在，getCurrentLocation函数如下所示

getCurrentLocation = () => {
    navigator.geolocation.watchPosition(
      position => {
        const { latitude, longitude } = position.coords;
        const { routeCoordinates } = this.state;
        const newCoordinate = { latitude, longitude };

        let region = {
          latitude: parseFloat(position.coords.latitude),
          longitude: parseFloat(position.coords.longitude),
          latitudeDelta: 5,
          longitudeDelta: 5
        };

        this.setState({
          initialRegion: region,
          region: region,
          routeCoordinates: routeCoordinates.concat([newCoordinate]),
          distanceTravelled:
            this.state.distanceTravelled + this.calcDistance(newCoordinate),
          prevLatLng: newCoordinate
        });
      },
        //animate to user's current location
        this.map.animateToRegion(region, 1000);
      error => console.log(error),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000,
        distanceFilter: 1
      }
    );
  };

---

从android的

react本机日志发布错误日志

Its仅显示最近5分钟以来的这些行。。。启动记录器的信息（C:\Users\adeliftikar\AppData\Local\Android\Sdk/platform tools/adb logcat*：S ReactNative:V ReactNativeJS:V）崩溃的开始------系统的开始------Main的开始即使抛出错误也显示相同的日志吗？不是，，，它现在显示以下日志09-24 17:06:30.329 13080 13118 I reactivejs:{超时：3，09-24 17:06:30.329 13080 13118 I reactivejs:POSITION_UNAVAILABLE:2，09-24 17:06:30.329 13080 13118 I reactivejs:PERMISSION_DENIED:1，09-24 17:06:30.329 13080 13118 I reactivejs:message:'提供商gps暂时不可用'，09-24 17:06:30.329 13080 13118 I reactivejs:code:3}看起来有权限问题