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

作者：hangge | 2017-04-27 08:10

React Native 提供了 Geolocation API，让我们可以很方便的获取当前的位置信息，或者监听位置的变化。下面通过样例演示如何使用。

一、获取当前的定位信息

1，getCurrentPosition()方法介绍

static getCurrentPosition(geo_success, geo_error?, geo_options?)

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

（1）geo_success：成功回调函数

（2）geo_error：失败回调函数

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

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

2，效果图

点击“获取位置”按钮后，获取当前设备地理位置信息，并弹出显示。

3，样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var Geolocation = require('Geolocation');

//默认应用的容器组件
class App extends Component {
   //渲染
   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'
  },
});

AppRegistry.registerComponent('ReactDemo', () => App);

二、监视定位变化

1，watchPosition()方法介绍

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

2，clearWatch()方法介绍

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

3，效果图

（1）点击“开始监听”按钮后便开始监视设备的位置变化，每当定位信息有发生变化则会弹出显示。

（2）点击“停止监听”按钮则停止对设备位置变化的监视。

4，样例代码

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

React / React Native