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: ,
marginTop:
},
item:{
margin:,
height:,
borderWidth:,
padding:,
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: ,
marginTop:
},
item:{
margin:,
height:,
borderWidth:,
padding:,
borderColor:'#ddd',
textAlign:'center'
},
}); AppRegistry.registerComponent('ReactDemo', () => App);