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

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请求

记得开启 位置访问权限

打印结果如下:

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

(0)

相关推荐

  • React Native之prop-types进行属性确认详解

    属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

  • React Native 自定义下拉刷新上拉加载的列表的示例

    在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的

  • react-native android状态栏的实现

    react-native 开发App的时候难免会遇到状态栏的,背景颜色和字体颜色与App内容页面,色调适配,间言之就是将状态栏颜色与App颜色一致,使用户界面更加整体. 1.android设备系统元素 导航栏:就是设备顶部的网络.时间.电量等信息栏 ActionBar: 返回按钮以及系统默认的header区域,RN开发中一般不会用到,RN中在navigation中进行定制 导航栏: 设备下方的物理返回.回桌面.选择应用程序等系统导航栏 2.状态栏的呈现形式 默认展示,一直显示手机系统的状态栏 透

  • ReactNative中使用Redux架构总结

    本文介绍了ReactNative中使用Redux架构总结,分享给大家.具体如下: 使用Redux也有一段时间了.总结一下. 为什么要使用Redux? 背景: RN的state(可变,子组件不可见)和props(不可变,子组件可见)的设计,在面对大型项目时候,容易因为不经意修改state造成状态混乱,组件渲染错误 RN使用了Virtual DOM,不需要Target绑定->Action修改UI属性,只要当状态变化,render新状态下的组件,数据单向传递,而MVC的设计模式存在双向数据流. RN不

  • react-native封装插件swiper的使用方法

    首先创建简单的react-native项目,创建一个文件夹.然后用命令符输入 react-native init swiper 创建完成之后开发项目,我用的vs 打开控制台,安装swiper依赖. 安装:npm i react-native-swiper --save 查看:npm view react-native-swiper 删除:npm rm react-native-swiper --save 这里还需要 npm i 下更新下本地的依赖库 启动app项目 ios: react-nati

  • react native 仿微信聊天室实例代码

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

  • react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种. 第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间. 准备 我们先来分析一波.一个滑动组件在APP上是一种什么状态. 这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动. 同时计算出当前位置需要滑动多少距离才能够将位置居中. 需要滑动的位置=点击位置的左边距-

  • react-native-video实现视频全屏播放的方法

    react-native-video是github上一个专用于React Native做视频播放的组件.这个组件是React Native上功能最全最好用的视频播放组件,还在持续开发之中,虽然还有些bug,但基本不影响使用,强力推荐. 本篇文章主要介绍下怎么使用react-native-video播放视频,以及如何实现全屏播放,屏幕旋转时视频播放器大小随之调整,显示全屏或收起全屏. 首先来看看react-native-video有哪些功能. 基本功能 控制播放速率 控制音量大小 支持静音功能 支

  • react native基于FlatList下拉刷新上拉加载实现代码示例

    react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用 官方介绍:https://reactnative.cn/docs/flatlist/ 下面是效果图: ios效果图 android效果图 总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整.这样做的目的是:防止不满屏状态下的,onEndReac

  • React Native react-navigation 导航使用详解

    一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.

  • ReactNative实现Toast的示例

    对于Android开发工程师来说,Toast在熟悉不过了,用它来显示一个提示信息,并自动隐藏.在我们开发RN应用的时候,我门也要实现这样的效果,就一点困难了,倒也不是困难,只是需要我们去适配,RN官方提供了一个API ToastAndroid,看到这个名字应该猜出,它只能在Android中使用,在iOS中使用没有效果,所以,我们需要适配或者我们自定义一个,今天的这篇文章就是自定义一个Toast使其在Android和iOS都能运行,并有相同的运行效果. 源码传送门 定义组件 import Reac

随机推荐