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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
this和执行上下文实现代码
Jul 01 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue左滑组件slider使用详解
Aug 21 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
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python操作cfg配置文件方式
2019/12/22 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python 线程的五个状态
2020/09/22 Python
Python datetime模块的使用示例
2021/02/02 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
大专自我鉴定范文
2013/10/01 职场文书
大学毕业生工作的自我评价
2013/10/01 职场文书
毕业论文评语大全
2014/04/29 职场文书
入职担保书怎么写
2014/05/12 职场文书
银行金融服务方案
2014/06/11 职场文书
万能检讨书
2015/01/27 职场文书
电力培训学习心得体会
2016/01/11 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫