React Native вычисляет расстояние между двумя координатами с помощью GeoLib

У меня две проблемы. Во-первых, я могу видеть долготу и широту своего текущего местоположения, если запускаю приложение с помощью команды react native run-android. Если я перезагружу экран, я получаю сообщение об ошибке тайм-аута, говорящее: «Время ожидания запроса местоположения истекло», и я не вижу долготы и широты. Ниже изображение

введите здесь описание изображения

Другая проблема, с которой я сталкиваюсь, заключается в том, что когда я пытался рассчитать расстояние между двумя координатами долготы и широты, я получаю ошибку пути. Ниже мой код и снимок экрана с ошибкой:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Linking } from 'react-native';
import geolib from "geolib";

class GeolocationExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }



  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
  }

  render() {

    let geolib = require('geo-lib');


    let result =geolib.Distance({
     p1: { lat: this.state.latitude, lon: this.state.longitude },
     p2: { lat: 33.613355, lon: -117.373261 }
 });


    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        <Text>Distance between two points:result </Text>
        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}


      </View>
    );
  }
}

export default GeolocationExample;

введите здесь описание изображения

Я не уверен, почему появляется эта ошибка.

Любая помощь будет оценена.


react-native reactjs react-android
person Anjali    schedule 03.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте этот работающий обновленный код!

import {getDistance} from 'geolib';
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";

export default class Locations extends Component
{
    state = {  
        destinationLat: 31.6200,
        destinationLong: 74.8765,
        distance:null,
        startLat:52.528308,
        startLong:1.3817765
    };
    async componentDidMount(){
        let location = await Location.getCurrentPositionAsync({
            enableHighAccuracy: true,
        });
        this.setState({
            startLat: location.coords.latitude,
            startLong: location.coords.longitude,
          });
        var dis = getDistance(
            {latitude: location.coords.latitude, longitude: location.coords.longitude},
            {latitude: this.state.destinationLat, longitude: this.state.destinationLong},
          );
          this.setState({
            distance: dis/1000,
          });
    };
    render(){
        return(
            <Text>{this.state.distance} KMs</Text>
        );
    }
}
person Rahul    schedule 11.11.2020

arrow_upward
0
arrow_downward

Ошибка тайм-аута местоположения печально известна для некоторых API Android. Этот пакет предназначен для решения этой проблемы.

Что касается вашей проблемы с путями, вы импортируете из «geolib» без тире вверху, но затем требуете «geo-lib» с тире в вашем методе рендеринга. Я бы проверил, какой из них вы установили, и удалил ссылки на другой.

person vm909    schedule 03.05.2018