最近做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: "取消"}

]

)

}

}

效果图:

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

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

  1. ios 高德获取定位_单次定位-获取位置-开发指南-iOS 定位SDK | 高德地图API

    iOS定位SDK提供的单次定位方法基于苹果定位核心,苹果定位核心会在设备移动时连续返回定位结果,高德在此基础上封装了单次定位.当设备可以正常联网时,还可以返回该定位点的对应的中国境内位置信息(包括:省 ...

  2. ios 高德获取定位_概述-iOS 定位SDK | 高德地图API

    简介 高德 iOS 定位 SDK 提供了不依赖于地图定位的定位功能,开发者可以无地图显示的场景中便捷地为应用程序添加定位功能. iOS定位SDK提供了单次定位.连续定位.逆地理信息.地理围栏等功能. ...

  3. winform 在panel怎么实现锚点定位_高德网络定位之“移动WiFi识别”

    导读 随着时代的发展,近10年来位置产业蓬勃发展,定位能力逐渐从低精度走向高精度,从部分场景走向泛在定位.设备和场景的丰富,使得定位技术和能力也不断的优化更新.定位能力包括GNSS.DR(航迹推算). ...

  4. java 位置定位_地图实时定位我的位置

    首先需要显示地图,请看我的另一篇文章 然后实时获取定位信息中的经度和纬度, 然后启动定位功能标记我的位置 开启定位图层 setMyLocationEnabled(true) 构造定位数据 MyLoca ...

  5. 宝马无法gps定位_宝马gps定位如何打开

    不少人都在咨询汽车的各种事宜,有个粉丝就问到:宝马gps定位怎么打开如果大家也想知道的话,不妨就看下小编的介绍吧,希望给大家带来一定的帮助. 宝马汽车的GPS定位系统是默认开启的,只要是汽车在驾驶流程 ...

  6. pdf python定位_如何使用PyPDF2获取PDF定位

    我正在使用Python/Django. PyPDF2阅读我目前的pdf. 如何使用PyPDF2获取PDF定位 我想阅读我已经保存的pdf文件,并获得pdf内单页的方向. 我期望能够确定页面是横向还是纵 ...

  7. antd tree搜索并定位_自动驾驶定位思考

    最近在做高精地图方面的工作,有一些疑问,这里把一些想法记录下来,希望能够抛砖引玉,对大家有所帮助. 高精地图的作用:一方面为我们提供地理位置信息,另一方面也为我们提供道路的辅助信息(红绿灯,路口,道路 ...

  8. rn在java中什么意思_[React Native Android 安利系列]RN中使用js调用java代码

    欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: 书接上节,我们上节说道,如何控制原生andr ...

  9. python3 获取当前路径_如何使用python3获取当前路径及os.path.dirname的使用

    这篇文章主要介绍了如何使用python3获取当前路径及os.path.dirname的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方法一: ...

最新文章

  1. Gartner:2019十大战略技术趋势
  2. 你奋斗这么辛苦,这辈子要证明什么?
  3. java plc通讯_树莓派+西门子PLC+Aliyun
  4. POJ 1064 -- Cable master(二分)
  5. windows2008配置来
  6. 被动声呐 相移波束形成_100天计划-DAY9-拖曳声呐
  7. 解读全球热点,传递科研进展,这份AI内参要承包你的AI信息源
  8. linux系统操作mysql数据库_利用workbench对linux/Ubuntu系统中的mysql数据库进行操作
  9. 超简单的Matlab附加功能安装包的安装方法
  10. 【Excel,遗忘密码后如何撤销工作表保护密码】
  11. 战投之王:蔡崇信、刘炽平和刘德的精密战争
  12. 智能实验室管理系统的现状怎么样
  13. 融云助力中国企业打造海外云平台
  14. windows下安装you-get的简要记录
  15. java-php-python-ssm职工工资管理系统计算机毕业设计
  16. 建模学习—带你轻松认识并掌握3Dmax
  17. Metal 框架之自定义设置渲染通道
  18. python爬取《龙岭迷窟》的数据,看看质量剧情还原度到底怎么样
  19. RPA机器人是什么意思?RPA机器人能为企业解决哪些问题?
  20. 【教程】【PDF】Python2.7教程

热门文章

  1. Foxmail 绑定企业邮箱
  2. 使用delphi 开发多层应用(十三)使用Basic4android 直接访问kbmMW server
  3. xmlHttpRequest无刷新验证用户名
  4. JavaScript,等比例缩放图片的函数,很好用。
  5. 项目:NMEA2000的数据格式解析
  6. 如何用python做计算软件_如何用Python写一个计算器软件 附带效果图
  7. c语言编程安全队列,C语言编程队列的实现
  8. 一年代码功能点的创新性怎么写_查新报告的查新点(创新点)写法,参考
  9. python按比例生成数据组_基于python中的一个值生成“正态分布”数据
  10. 图像处理 --- 三、图像变换 3.2 图像的几何变换