Блог

У меня проблема с моей мобильной системой отслеживания, это почти 2 дня назад, я не могу найти решение. Можете ли вы помочь мне, ребята, как получить текущую широту и длину в режиме реального времени? Я могу получить текущую широту и длину, но не в режиме реального времени,

Пример.Если я выхожу за пределы своего дома, автоматически мои широта и длина этой области будут значением моего состояния. Что я имею в виду, каждый раз, когда я перемещаюсь, я могу получать широту и длину моего местоположения.

Я покажу вам, ребята, свой код,

Мой импорт и Const:

 import MapView, { Marker } from 'react-native-maps';

const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATTITUDE_DELTA = 0.005
const LONGTITUDE_DELTA = LATTITUDE_DELTA * ASPECT_RATIO 
  

Моя функция:

     constructor(props) {
    super(props);

    this.state = {

      currentLocation: {
        latitude:0,
        longitude:0,
        latitudeDelta:0,
        longitudeDelta:0
      },

      updatedLocation: {
        latitude:0,
        longitude:0,
        latitudeDelta:0,
        longitudeDelta:0
      },

      markerPosition: {
        latitude:0,
        longitude:0,
        latitudeDelta:0,
        longitudeDelta:0
      }


    }

  }



  async _currentPosition() {
    navigator.geolocation.getCurrentPosition((position) => {

      //lat and long current
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var currentLocationValue = {
        latitude:lat,
        longitude:long,
        latitudeDelta:LATTITUDE_DELTA,
        longitudeDelta:LONGTITUDE_DELTA
      }

      this.setState({currentLocation:currentLocationValue})
      this.setState({markerPosition:currentLocationValue})

      console.log(currentLocationValue);


   },(error) => alert(JSON.stringify(error)),
   {enableHighAccuracy:true,timeout:5000})
  }


  async _updatedPosition() {
    this.watchID = navigator.geolocation.watchPosition((position) => {

        //lat and long current
        var lat = parseFloat(position.coords.latitude)
        var long = parseFloat(position.coords.longitude)

        var updateLocationValue = {
          latitude:lat,
          longitude:long,
          latitudeDelta:LATTITUDE_DELTA,
          longitudeDelta:LONGTITUDE_DELTA
        }

        this.setState({updatedLocation:updateLocationValue})
        this.setState({markerPosition:updateLocationValue})

        console.log(updateLocationValue);


    },(error) => alert(JSON.stringify(error)),
    {enableHighAccuracy:true,timeout:5000,maximumAge:2000})
  }


  componentDidMount() {
    this._currentPosition();
    this._updatedPosition();

  }

  componentWillUnmount() {
    //navigator.geolocation.clearWatch(this.watchID)
  }
  

Мой рендеринг:

     render() {
    return (
        <View style={styles.container}>

          <MapView 
              style = {styles.mapcontainer}
              region = {this.state.currentLocation}
              onRegionChange={this.onRegionChange}

              >

              <MapView.Marker 
                  coordinate={this.state.markerPosition}>
                  <View style={styles.radius}>
                      <View style={styles.marker}/>
                  </View>
              </MapView.Marker>

          </MapView>
          <Text>
            {this.state.markerPosition.latitude},{this.state.markerPosition.longitude}
          </Text>
        </View>
      )
  }