React Native - 使用Geolocation进行定位(获取当前位置、监听位置变化)
1,getCurrentPosition()方法介绍
static getCurrentPosition(geo_success, geo_error?, 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);
React Native - 使用Geolocation进行定位(获取当前位置、监听位置变化)的更多相关文章
- html5定位获取当前位置并在百度地图上显示
用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...
- 后台自动运行,定期记录定位数据(Hbuilder监听 app由前台切换到后台、切换运行环境的 监听方法)
http://ask.dcloud.net.cn/question/28090 https://blog.csdn.net/qq_37508970/article/details/86649703 各 ...
- Android 之 获取地理位置及监听
第一步.添加权限 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> ...
- 获取运行端口监听的用户身份auth-owner
获取运行端口监听的用户身份auth-owner Windows系统提供工作在TCP 113端口的授权服务(Authentication Service),用来判断TCP连接的用户.Nmap的aut ...
- Spring-Security (学习记录五)--配置登录时,密码采用md5加密,以及获取登录信息属性监听同步自己想要的登录信息
目录 1. PasswordEncoder 采用密码加密 2. 获取当前的用户信息 1. PasswordEncoder 采用密码加密 使用前面的例子.可以看出我们数据库密码是采用明文的,我们在登录的 ...
- react native 安卓生产包无法获取线上数据
android:usesCleartextTraffic="true"
- ios 定位获取当前位置信息
啊,倦怠的人生啊~~ 什么事情都没做一眨眼就2点半了啊!!赶紧爬起来写博客啊. 诸位看官会鄙视我么,表示我真心不是把这当技术文章写的啊. 啊,下午我们来第二篇.获取地理位置信息.嗯嗯,秘籍上说叫逆向地 ...
- React Native纯干货总结
随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...
- [React Native]获取网络状态
使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...
随机推荐
- JVM内存监控(五)
频繁fullgc排查 jvm配置 -Xms200m -Xmx200m -Xmn50m -XX:PermSize=30m -XX:+HeapDumpBeforeFullGC -XX:+HeapDumpA ...
- 解决maven打包编译出现File encoding has not been set问题
maven打包编译时后台一直输出警告信息 [WARNING] File encoding has not been set, using platform encoding GBK, i.e. bui ...
- nyoj_524_A-B Problem_201312012035
A-B Problem 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 A+B问题早已经被大家所熟知了,是不是很无聊呢?现在大家来做一下A-B吧. ...
- C - 剪花布条
一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和 ...
- Spring MVC-集成(Integration)-生成JSON示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_json.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如 ...
- Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题
当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dro ...
- 关于压缩软件gzip和xz的简单对照
晚上因为处理磁盘报警的须要.进行了日志压缩,在此次压缩中分别使用了gzip和xz软件对文本进行了压缩.压缩的结果很令人诧异. 出于对xz好奇的原因是因为在下载内核源码时常常能够看到.xz格式的文件包. ...
- HDU 2206 IP的计算(字符串处理)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2206 Problem Description 在网络课程上,我学到了非常多有关IP的知识. IP全称叫 ...
- STL在迭代的过程中,删除指定的元素
直接上Code,上 Picture #include <iostream> #include <list> using namespace std; // STL在迭代的过程中 ...
- js原生offsetParent解析
offsetParent是个仅仅读属性,返回近期显示指定位置的容器元素的引用. 假设元素没有指定位置,近期的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent. ...