reactnative 获取定位_【React Native】定位获取经纬度,当前城市等地址信息

最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法。主要用到的方法有:

这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了。这里使用 getCurrentPosition 方法获取当前位置信息,再用逆地址解析服务完成地址获取。

获取经纬度城市地址信息完整步骤如下:

1. 导入Geolocation

import Geolocation from 'Geolocation';

2.调用 getCurrentPosition 方法得到经纬度

这里将这个操作封装成一个方法,并返回Promise。

//获取经纬度的方法 Longitude Latitude

let getLongitudeAndLatitude = () => {

//获取位置再得到城市先后顺序,通过Promise完成

return new Promise((resolve, reject) => {

Geolocation.getCurrentPosition(

location => {

//可以获取到的数据

var result = "速度:" + location.coords.speed +

"\n经度:" + location.coords.longitude +

"\n纬度:" + location.coords.latitude +

"\n准确度:" + location.coords.accuracy +

"\n行进方向:" + location.coords.heading +

"\n海拔:" + location.coords.altitude +

"\n海拔准确度:" + location.coords.altitudeAccuracy +

"\n时间戳:" + location.timestamp;

// ToastAndroid.show("UTIl" + location.coords.longitude, ToastAndroid.SHORT);

resolve([location.coords.longitude, location.coords.latitude]);

},

error => {

// Alert.alert("获取位置失败:" + error, "")

reject(error);

}

);

})

}

经纬度,海拔等信息的获取方式就是以 location.coords.longitude,location.coords.latitude ,location.coords.altitudeAccuracy的方式得到。

如果只是需要获取经纬度,这里已经完成。可以通过setState或者赋值给全局变量等方式记录。

为了进一步获取城市,这里Promise将经纬度组合成一个数组resolve传递出去。

3.使用逆地址解析服务将经纬度解析成地址信息

这里可以通过百度地图或者腾讯位置服务的逆地址解析服务来完成,流程如下:

注册成为开发者

创建自己的应用

然后获取key或认证

加上经纬度等参数来发起请求

例如百度地图的请求方式:

https://api.map.baidu.com/geocoder/v2/?output=json&ak=9a9a9a9a9a9a9a9a9a9a9a9a9a&location=39.206526,116.909158

(9a9a…就是你申请的ak认证,对应在你创建的应用中)

通过Postman 测试请求的效果如下:

这里需要将 location 经纬度参数替换为自己通过 getCurrentPosition 方法获取到的经纬度。也就是先获取到经纬度,再通过逆地址解析获取到城市等地址信息。将这个操作再封装成一个方法:

getCityLocation() {

return new Promise((resolve, reject) => {

getLongitudeAndLatitude()

//获取经纬度的方法返回的是经纬度组成的数组

.then((locationArr) => {

// Alert.alert("", "" + locationArr[1]);

let longitude = locationArr[0];

let latitude = locationArr[1];

this.getNetData(BaiduMap_URL + latitude + "," + longitude)

.then((data) => {

if (data.status == 0) {

resolve(data);

} else {

reject(ErrorDeal.getError(data.code));

}

}).catch((data) => {

reject(ErrorDeal.getError(data.code));

})

}).catch((data) => {

reject(ErrorDeal.getError(data.code));

})

})

}

getLongitudeAndLatitude 就是上面的获取经纬度的方法,this.getNetData是一个fetch 请求的封装。拼接请求 Url,fetch请求,此时 resolve 的数据就是 Postman 解析的 json 数据了。

//获取网络数据

getNetData(url) {

return new Promise((resolve, reject) => {

fetch(url).then((response) => response.json())

.then((responseData) => {

resolve(responseData);

})

.catch((error) => {

reject(ErrorDeal.getError(NetWork_Error))

})

.done()

})

}

4.获取信息并处理

上面 getCityLocation 返回的 Promise 中 resolve 传递的 data 就是 json 数据了,就已经可以因自身需求进行数据处理显示的操作了。

this.getCityLocation()

.then((data) => {

// Alert.alert("位置?", "" + JSON.stringify(data));

this._confirmCity(data);

})

.catch((error) => {

//ToastAndroid.show("失败" + JSON.stringify(error), ToastAndroid.SHORT);

});

调用 getCityLocation,再 then 方法处理处理 data ,此时的 data 是一个 json 对象。

例如我的处理是调用 _confirmCity 方法弹出一个城市切换的确认框:

//弹出定位框

_confirmCity(data) {

let address = data.result.addressComponent;

if (address!="") {

Alert.alert("城市定位", "\n当前城市为" + address.province + address.city + "\n \n 是否设为当前城市?\n",

[

{

text: "设为当前城市", onPress: () => {

this.setCurrentCity(address.city)

}

},

{text: "取消"}

]

)

}

}

效果图:

这里就已经完成了经纬度的获取,城市地址信息的获取功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/502062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux hash 算法,识别哈希算法类型hash-identifier

识别哈希算法类型hash-identifier是一款哈希算法识别工具。通过该工具,用户可以识别哈希值所使用的哈希算法。确定算法后,就可以采用对应的工具进行xx。执行该命令如下所示:rootdaxueba:~# hash-identifier输出信息如下所示:#####…

calendar获取本周一的日期_Java Calendar 获取本周周一和周日代码

Java Calendar 获取本周周一和周日代码/*** 得到本周周一** return yyyy-MM-dd*/public static String getMondayOfThisWeek() {Calendar c Calendar.getInstance();int day_of_week c.get(Calendar.DAY_OF_WEEK) - 1;if (day_of_week 0)day_of_week 7;c.add(Calendar.DATE…

android source镜像源_【转载】Celadon快速上路指南Part2:编译Celadon镜像

Celadon快速上路指南Part2:编译Celadon镜像From: 孙晓璐 AndroidIA Celadon 9/20一目了然 | Celadon 新手上路快速通道隆重揭晓 | 打开Celadon 的正确姿势上一期我们向您介绍了如何安装Celadon预编译镜像(Celadon快速上路指南 Part1:安装Cela…

光学字符识别 android,基于Android的光学字符识别研究与实现

摘要:随着Android手机平台的普及和信息化进程的不断推进,利用手持设备高效地将文档信息录入已经成为一个亟需解决的问题,其关键技术光学字符识别在手机上的应用日益受到人们重视.本文所做工作正是针对这一问题而展开.本文设计的Android平台光学字符识别通过手机摄像…

适合程序员的耳机_为什么很多程序员工作时都戴耳机?

观点一:非诚勿扰,想静静。1、啥也没听,只是带着耳机而已。只是想告诉别人不要打扰我,选择性屏蔽一些讨厌的人说的话,不回答他。2、在听笑话或者有声小说。特别不想工作的时候会很认真地听,如果进入工作状态…

python中os模块_Python的武器库11:os模块

说到编程语言python,有一个著名的格言"余生太短,只用python"。如果要分析为什么会存在这么一句格言?python的语法并不简单,有复杂难懂的部分,之所以有这样一句格言,是因为python中有很多强大的模…

Android实现拍照并存储功能,Android实现拍照及图片显示效果

本文实例为大家分享了Android拍照及图片显示的具体代码,供大家参考,具体内容如下1、功能声明当应用需要使用相机、NFC等外设时,需要在AndroidManifest.xml中进行声明。这样,当设备缺少这些外设时,应用商店的安装程序可…

list redis 怎样做排行_redis实现商品销量排行榜

之前练习做过一个网上商城,采用SSM框架实现。该项目有一个商品排行榜模块没有实现,决定采用springbootdubboredis实现该模块。1.新建springboot项目。本项目的springboot版本号为:org.springframework.bootspring-boot-starter-parent2.1.6.RELEASE引入d…

大学计算机基础python学多久_基于Python 的“大学计算机基础”课程教学设计

基于Python 的“大学计算机基础”课程教学设计 日期:2018-04-11 04:32 摘要 培养非计算机专业大学生的计算思维能力,在“大学计算机基础”课程教学中引入程序设计内容已成各大高校的共识,但选择何种程序设计语言仍然观点不一。本文针对大一新…

android设计招式之美,6 - 设计模式与Android框架设计f

本教程由麦可网录制,共55节,主要介绍的内容有设计模式与Android框架设计、Android框架与应用类别的接合卡榫(Hook)函数、 Template Method模式等,本站提供部分教程在线学习,全套教程请下载观看。完整目录如下:1 - 设计…

treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...

API: https://vue-treeselect.js.org/#events1.ids: 即value1.lable: 需要用到方法:select(node,instanceId) 和 deselect(node,instanceId)v-model"DRHA_EFaultModeTree_value":multiple"true":options"DRHA_EFaultModeTree_options"…

java 同步锁_死磕 java同步系列之自己动手写一个锁Lock

问题(1)自己动手写一个锁需要哪些知识?(2)自己动手写一个锁到底有多简单?(3)自己能不能写出来一个完美的锁?简介本篇文章的目标一是自己动手写一个锁,这个锁的…

linux ofstream open,浅谈linux性能调优之十一:内存分配管理

linux下内存分配的管理主要通过内核参数来控制:1.与容量相关的内存可调参数以下参数位于 proc 文件系统的 /proc/sys/vm/ 目录中。overcommit_memory :规定决定是否接受超大内存请求的条件。这个参数有三个可能的值:* 0 — 默认设置。内核执行…

click事件在什么时候出发_剖析setTimeout和click点击事件的触发顺序

下面是一段非常简单的JavaScript代码dianjisetTimeout(function () {alert(timer handler)}, 2000)function test () {document.addEventListener(click, function (e) {alert(click handler)}, false)var startTime new Date()while ((new Date()).getTime() - startTime <…

android里canvas视频帧,移动端用canvas截取视频封面,如何不截取第一帧,而是截取其它的帧?...

我在微信开发工具里截的图是可以的&#xff0c;但是在手机上截的图缺变成全透明的了。我猜是视频的第一帧的问题微信开发工具的截图手机的截图我的代码&#xff1a;JS&#xff1a;function captureImage(video) {var scale1var canvas document.createElement("canvas&qu…

python画正方形内切圆_python画出三角形外接圆和内切圆的方法

刚看了《最强大脑》中英对决&#xff0c;其中难度最大的项目需要选手先脑补泰森多边形&#xff0c;再找出完全相同的两个泰森多边形。在惊呆且感叹自身头脑愚笨的同时&#xff0c;不免手痒想要借助电脑弄个图出来看看&#xff0c;闲来无事吹吹牛也是极好的。 今天先来画画外接圆…

ar面部识别_Blippar公司加入实时面部识别技术 扫脸就能解锁个人AR简介

VR之家消息&#xff1a;近日&#xff0c;AR初创公司Blippar在其应用中加入了实时面部识别技术。据悉&#xff0c;利用这项新技术&#xff0c;用户通过智能手机摄像头扫脸&#xff0c;只要被扫对象已经存在AR简介&#xff0c;就能解锁这个人的个人资料。Blippar公司加入实时面部…

查看地区的ip段_「教程」CloudFlare 自选 IP优化网站速度

前言CloudFlare 官网虽然不提供 CNAME / AAAA / A 记录接入 CloudFlare 的 CDN &#xff0c;但是我们可以通过 CloudFlare Partner 免费使用 CNAME / A 记录接入 CloudFlare 。而我们正好利用 CloudFlare 使用 A 记录接入 CDN 的方式&#xff0c;自定义节点 IP &#xff0c;例如…

android手机可以设置屏幕锁定,安卓手机屏幕锁设置方法(九个点图案)

这里以三星S5368手机屏幕锁为例随着三星S5368手机系统功能愈来愈完善&#xff0c;性能愈来愈强劲&#xff0c;越来越多的三星S5368用户们都喜欢把一些重要的信息甚至隐私放在三星S5368手机里面&#xff0c;但是这就有可能会让别人看到&#xff0c;这样一来你的三星S5368里面的信…

python win10 连接hive_使用win10+python3.5+impyla 连接大数据平台hive表的步骤与问题解决...

环境硬件配置及Hadoop&#xff0c;Hive版本一、安装步骤pip install pure-saslDownloading https://pypi.tuna.tsinghua.edu.cn/packages/16/83/30eaf3765de898083 75a8358f9c15d45a3dd44ed26be991471abc0b4480b/pure_sasl-0.5.1-py2.py3-none-any.whlpip install thrift_sasl0…