有什么方法可以使用react-native-maps实时获取当前位置的经纬度吗?

时间:2019-03-15 17:22:53

标签: android react-native react-native-maps

我的跟踪移动系统有问题,这差不多是两天前,我找不到解决方案。您能帮助我如何实时获取当前经度和纬度吗?我可以获取当前的经度和纬度,但不能实时获取

例如。如果我出门在外,那么我的经纬度自动成为该州的价值。我的意思是,每次搬家时,我都能得到自己所在位置的经纬度。

Screenshot

我将向大家展示我的代码,

我的导入和检查:

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>
      )
  }

0 个答案:

没有答案