React Native - 使用Geolocation进行定位（获取当前位置监听位置变化）

Posted 2020-10-07 haonanElva

1，getCurrentPosition()方法介绍

static getCurrentPosition(geo_success, geo_error?, geo_options?

该方法用于获取当前的位置，其参数如下：

（1）geo_success：成功回调函数

（2）geo_error：失败回调函数

（3）geo_options：传递的参数。其支持的属性有：

• timeout：指定获取地理位置的超时时间，默认不限时。单位为毫秒。
• maximumAge：最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为 0，表示浏览器需要立刻重新计算位置。
• enableHighAccuracy：指示浏览器获取高精度的位置，默认为 false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。

  样例代码，直接可以使用

  import React from ‘react‘;
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from ‘react-native‘;
   
  var Geolocation = require(‘Geolocation‘);
   
  //默认应用的容器组件
  export default class Localtion extends React.Component {
  
      static navigationOptions = ({ navigation }) => {
          const { navigate } = navigation;
          return {
              title: ‘获取定位‘
          };
      };
  
     //渲染
      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.item} onPress={this.getLocation.bind(this)}>获取位置</Text>
              </View>
          );
      }
   
     //获取位置
      getLocation() {
          Geolocation.getCurrentPosition(
              location => {
                  var result = "速度：" + location.coords.speed +
                            "\n经度：" + location.coords.longitude +
                            "\n纬度：" + location.coords.latitude +
                            "\n准确度：" + location.coords.accuracy +
                            "\n行进方向：" + location.coords.heading +
                            "\n海拔：" + location.coords.altitude +
                            "\n海拔准确度：" + location.coords.altitudeAccuracy +
                            "\n时间戳：" + location.timestamp;
                  alert(result);
              },
              error => {
                  alert("获取位置失败："+ error)
              }
          );
      }
  }
   
  //样式定义
  const styles = StyleSheet.create({
      container:{
          flex: 1,
          marginTop:25
      },
      item:{
          margin:15,
          height:30,
          borderWidth:1,
          padding:6,
          borderColor:‘#ddd‘,
          textAlign:‘center‘
      },
  });
   

  二、监视定位变化

  1，watchPosition()方法介绍

  如果我们需要设定一个回调函数来不断响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。可以通过 watchPosition() 函数实现该功能。
  watchPosition() 与 getCurrentPosition() 接收的参数相同，但回调函数会被调用多次。
  我们可以直接调用 watchPosition() 函数，不需要先调用 getCurrentPosition() 函数。
   

  2，clearWatch()方法介绍

  根据传入的 watchid 来对应的位置监听活动。

   

  样例代码

• import React, { Component } from ‘react‘;
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from ‘react-native‘;
   
  var Geolocation = require(‘Geolocation‘);
   
  //监听定位的id
  var watchID = null
   
  //默认应用的容器组件
  class App extends Component {
     //渲染
     render() {
        return (
          <View style={styles.container}>
           <Text style={styles.item} onPress={this.beginWatch.bind(this)}>开始监听</Text>
           <Text style={styles.item} onPress={this.stopWatch.bind(this)}>停止监听</Text>
          </View>
        );
     }
   
     //开始监听位置变化
     beginWatch() {
        watchID = Geolocation.watchPosition(
                  location => {
                      var result = "速度：" + location.coords.speed +
                                  "\n经度：" + location.coords.longitude +
                                  "\n纬度：" + location.coords.latitude +
                                  "\n准确度：" + location.coords.accuracy +
                                  "\n行进方向：" + location.coords.heading +
                                  "\n海拔：" + location.coords.altitude +
                                  "\n海拔准确度：" + location.coords.altitudeAccuracy +
                                  "\n时间戳：" + location.timestamp;
                      alert(result);
                  },
                  error => {
                    alert("获取位置失败："+ error)
                  }
              );
     }
   
     //停止监听位置变化
     stopWatch() {
        Geolocation.clearWatch(watchID);
     }
   }
   
  //样式定义
  const styles = StyleSheet.create({
    container:{
      flex: 1,
      marginTop:25
    },
    item:{
      margin:15,
      height:30,
      borderWidth:1,
      padding:6,
      borderColor:‘#ddd‘,
      textAlign:‘center‘
    },
  });
   
  AppRegistry.registerComponent(‘ReactDemo‘, () => App);