Использование отслеживания местоположения React Native Geolocation и приставки для хранения координат, не получая часто и точно координаты - PullRequest
Новая
       34

Использование отслеживания местоположения React Native Geolocation и приставки для хранения координат, не получая часто и точно координаты

0 голосов
/ 04 июля 2018

Я создаю свое собственное приложение для отображения движений пользователей на карте, для которых я использую react-native-map, и когда пользователь нажимает кнопку start trip, я записываю координаты из navigator.geolocation.wathposition api и сохраняю координаты в избыточном состоянии, но это срабатывает около 10 -15 секунд, а иногда и больше, я пробовал значения distanceFileter [1,5,10] , но без изменений, из-за того, что polyline на карте не отображается должным образом. Я новичок в реагировании на родной язык и программирование, пожалуйста, предложите, где я не так Компонент положения часов расположен под drawer-navigation. 

my package.json :
"dependencies": {
"create-react-class": "^15.6.3",
"haversine": "^1.1.0",
"native-base": "^2.4.5",
"react": "16.3.1",
"react-native": "^0.55.4",
"react-native-maps": "^0.21.0",
"react-native-modal": "^6.1.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.3.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}

и мой компонент положения часов следующим образом: 

class GetCoords extends Component {
constructor(props) {
super(props);
 this.state = {
   shadowOffsetWidth: 1,
   shadowRadius: 4,
   watchId: '',
   isTripStarted: false,
  };
}

componentWillUnmount() {
   stopWatchPosition();
}

startWatchPosition = () => {
if (this.state.watchId === '' || this.state.watchId === null) {
  let watchId = navigator.geolocation.watchPosition(this.getCoordinates, this.geo_error,
    {
      enableHighAccuracy: true,
      maximumAge: 0,
      timeout: 5000,
      // useSignificantChanges: true,
      distanceFileter: 10,
    });

  this.setState({ watchId, isTripStarted: true })
}
this.props.navigation.navigate("Map", { title: "location tracking started" });

 }

stopWatchPosition = () => {
  if (this.state.watchId >= 0 && this.state.watchId !== '') {
  navigator.geolocation.clearWatch(this.state.watchId);
  this.setState({ watchId: '', isTripStarted: false });
}
}


getCoordinates = (position) => {

 let curLocation = {
  latitude: position.coords.latitude,
  longitude: position.coords.longitude,
  latitudeDelta: 0.0122,
  longitudeDelta: Dimensions.get("window").width / 
  Dimensions.get("window").height * 0.0122,
}
this.props.locationChanged(curLocation) // saving coordinates in redux state 
draw a polyline in the map screen;
}

geo_error = (err) => {
console.log("GeoLocationError:: ", err);
alert("Sorry, problem in getting position.");
}

 render() {
return (
  <Container>
    <AppHeader title="Home" />

    <Content padder>
      <Card>
        <CardItem>
          <Body>
             <Button vertical  onPress={this.startWatchPosition}>
                <Text>Start Trip</Text>
             </Button>

              <Button vertical  onPress={this.stopWatchPosition}>
                <Text>Stop Trip</Text>
             </Button>
          </Body>
        </CardItem>
      </Card>

    </Content>
  </Container>
 );
}

Компонент экрана карты выглядит следующим образом: 

class Map extends Component {
constructor(props) {
super(props);
}
 render() {
 if (this.props.mapLoading) {
  return (<Spinner />);

 }
 return (
  <Container>
    <AppHeader title="Map" />
     <View style={{ flex: 1 }}>
      <MapView
        style={styles.map}
        showsUserLocation
        showsMyLocationButton
        initialRegion={this.props.currLocation}
        region={this.props.currLocation}
      >
        <MapView.Polyline
          coordinates={this.props.markers.map((marker) => marker.coordinate)}
          strokeWidth={3}
        />
       </MapView>
    </View>
    </Container>
    );
  }
}

1 Ответ

0 голосов
/ 24 апреля 2019

Попробуйте 

startWatchPosition = () => {
    if (!this.watchId) {
      this.watchId = navigator.geolocation.watchPosition(
...