react native 获取地理位置的方法示例


Posted in Javascript onAugust 28, 2018

react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口

在 react native 中,我们所用的是react native 自带的api定位功能,无需引入第三方js。

react native 定位是通过Geolocation这个模块来实现的。想了解更多关于Geolocation的知识请点击下面 Geolocation自行了解,这里我们主要将他的几个方法。

static getCurrentPosition(geo_success, geo_error?, geo_options?)
Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while.

static watchPosition(success, error?, options?)
Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)

static clearWatch(watchID)

第一个方法是获取第一次定位时的位置信息,第一个为成功时的回掉函数,还有error时的回掉,第三个是传状态的。
在请求成功函数中有以下属性:

  • 经度 : coords.longitude
  • 纬度 : coords.latitude
  • 准确度 : coords.accuracy
  • 海拔 : coords.altitude
  • 海拔准确度 : coords.altitudeAcuracy
  • 行进方向 : coords.heading
  • 地面速度 : coords.speed
  • 时间戳 : new Date(position.timestamp)

在请求失败函数中有4种情况(err.code状态值):

1为用户拒绝定位请问
2暂时获取不到位置信息
3为请求超时
4未知错误

第三个options是可选参数,属性如下:

enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。

timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。

maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。

static watchPosition(success, error?, options?)

是多次改变了位置信息时才会触发,一般触发的可能性可能用户多次刷新数据,如一个人行车到其他城市,这时如果设置一个监听函数,只要watchid不一样,就会不断的触发

由于可能会出现缓存的情况,所以Geolocation 为我们提供了一个可以清除缓存的方法watchPosition(),改方法是 用于上一次的定位信息进行清除的。

对了,要启动react native 的定位功能的话,如果你是android 用户,你需要先在AndroidManifest.xml中加入以下权限

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

具体实现

import Geolocation from 'Geolocation';

  ......

 getlocal() {
  Geolocation.getCurrentPosition(
   val => {
    let ValInfo =
     '速度:' +
     val.coords.speed +
     '\n经度:' +
     val.coords.longitude +
     '\n纬度:' +
     val.coords.latitude +
     '\n准确度:' +
     val.coords.accuracy +
     '\n行进方向:' +
     val.coords.heading +
     '\n海拔:' +
     val.coords.altitude +
     '\n海拔准确度:' +
     val.coords.altitudeAccuracy +
     '\n时间戳:' +
     val.timestamp;
    this.setState({ LocalPosition: ValInfo });
    console.log("打印地理位置:"+`${val.coords.longitude},${val.coords.latitude}`)
    GET_GPRS({
     "l":`${val.coords.latitude},${val.coords.longitude}`,
     "type":111,
    }).then(res => {
     console.log(JSON.stringify(res))
    })
   },
   val => {
    let ValInfo = '获取坐标失败:' + val;
    this.setState({ LocalPosition: ValInfo }); //如果为空的话 没允许开启定位服务

   },
  );
 }

这里的 GET_GPRS 是自己封装的 fech请求

记得开启 位置访问权限

打印结果如下:

react native 获取地理位置的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
深入了解NumPy 高级索引
2020/07/24 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
社区包粽子活动方案
2014/01/21 职场文书
前台接待员岗位职责
2015/04/15 职场文书
情人节单身感言
2015/08/03 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python