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 相关文章推荐
accesskey 提交
Jun 26 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
js前端导出Excel的方法
2017/11/01 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
地球一小时宣传标语
2014/06/24 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
纪律教育月活动总结
2014/08/26 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android