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 ...
随机推荐
- nyoj 309
#include<stdio.h> #include<stdlib.h> #define N 1100 int c[N]; int main() { int l,n,i,m,a ...
- python库文件路径
python中import语句导入库文件路径可通过sys.path查看.写一个简单的小程序: import sys print sys.path 运行它,本机上得到的结果如下: ['', '/usr/ ...
- Spring MVC 入门(一)
什么是 Spring MVC 学习某一样东西之前,我们一定要大致知道这个东西是什么,能干什么,为什么要用它. Spring MVC 是一个开源平台,一个基于 Spring 的 MVC 框架,它支持基于 ...
- Loadrunner | 录制脚本时弹不出IE的解决办法
Loadrunner在录制脚本的时候有时候会遇到弹不出IE的问题,那怎么解决呢?别急,按照以下几个步骤操作,一般就可以解决这个问题. 1. IE浏览器取消勾选[启用第三方浏览器扩展] 启动IE,从[工 ...
- IntelliJ IDEA 在左右两侧出现Project、Maven Project等导航按钮
IntelliJ IDEA 在左右两侧出现Project.Maven Project等导航按钮 选中 View > Tool Buttons 可以查看Project.Maven Project等 ...
- Cookie && Session && Token
Cookies Cookie的由来: HTTP 本身是一个无状态的 request/response 协议. server接收一个来自client的request, 处理完以后返回一个response ...
- VBS 控制语句
1.if...then...end if if [条件] then [执行语句] end if 可以嵌套 多个if if [条件] then [执行语句] else if [条件] then [执行语 ...
- TTS-零基础入门之停止列表中单条语音播报
做了一个语音 循环播报列表信息.当我新删除了一天列表之后,发现它仅仅有在下一轮播报中才会取消.这明显是不合理的. 一開始的代码是这样写的. <span style="font-fami ...
- luogu3390 矩阵快速幂
矩阵A乘矩阵B是A的第i行向量乘以B的第j列向量的值放在结果矩阵的i行j列.因为矩阵乘法满足结合律,所以它可以与一般的快速幂算法同理使用.注意矩阵在乘的时候取模. #include <cstdi ...
- B2321 [BeiJing2011集训]星器 数学&&物理
这个题貌似特别奇怪,根本什么算法都想不出来,然而...看完题解之后,竟然用了能量守恒?惊了! 这里有一个题解: https://blog.csdn.net/Mima_Reincarnation/art ...