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 相关文章推荐
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
微信小程序使用request网络请求操作实例
Dec 15 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Vue v-text指令简单使用方法示例
Sep 19 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
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python切换hosts文件代码示例
2013/12/31 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python生成随机图形验证码详解
2017/11/08 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python flask框架post接口调用示例
2019/07/03 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
办公室保洁员岗位职责
2013/12/02 职场文书
计算机学生求职信范文
2014/01/30 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
个性与发展自我评价
2014/02/11 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript