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

2023-05-16


【2019-8-21】使用内置对象 navigator 来获取经纬度信息,参见【 定位获取经纬度】,获取到经纬度等位置信息后需要用到第三方api位置解析(本文后半段)。

【2019-7-20更新: 根据 RN 官方文档说明,本文中使用的Geolocation 及对应的 API 使用方式已经改变,并且安卓上使用时需要谷歌框架支持,因为众所周知的原因,请使用其他 Module 完成定位功能。react-native-location ,react-native-geolocation-service】

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

这里写图片描述

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

代码次要点:Promise对象菜鸟教程Promise阮一峰ES6-PromiseMDN-Promise

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


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.使用逆地址解析服务将经纬度解析成地址信息


这里可以通过[百度地图](http://lbsyun.baidu.com/apiconsole/key)或者[腾讯位置服务](http://lbs.qq.com/webservice_v1/guide-gcoder.html)的逆地址解析服务来完成,流程如下:
  1. 注册成为开发者
  2. 创建自己的应用
  3. 然后获取key或认证
  4. 加上经纬度等参数来发起请求

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

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: "取消"}
                ]
            )
        }
    }

效果图:

这里写图片描述

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【React Native】定位获取经纬度,当前城市等地址信息 的相关文章

  • UnityEditor.BuildPlayerWindow+BuildMethodException

    unity3D安卓打包报错 xff1a UnityEditor BuildPlayerWindow 43 BuildMethodException 61 errors at UnityEditor BuildPlayerWindow 43
  • Spark常用API<Scala>

    概览 1 转换 2 动作1 Transformation 1 1一个RDD进行转换操作1 2 两个RDD的转换操作1 3对一个Pair RDD进行转化操作1 4对两个PairRDD进行转换操作2 Action 2 1对一个RDD进行行动操作
  • 关于特定网页打不开问题的解决

    如果有一些特定的网站打不开 排除被屏蔽的可能性的话 xff0c 试着把DNS设置成了自动获取ip试试看 我就这样子解决了打不开学校官网的问题
  • 渲染业务领域全景图

    最近图形学应用领域愈发广泛 xff0c 根据我的理解 xff0c 制作了一张渲染相关业务全景图 xff0c 希望对大家的职业规划有一定帮助
  • AI 入门怎么学?这份学习指南请收好!

    万事开头难 xff01 AI 入门对很多初学 AI 的同学来说是一大难题 搜集了一大堆入门资料 xff0c Python 数学 深度学习应有尽有 xff0c 但就是无从下手 xff0c 总是在第一章与放弃之间徘徊 那么 xff0c AI 应
  • FTP如何设置用户名密码

    1 新建FTP站点 xff0c 指定名称和物理路径 2 身份验证 选择 基本 xff0c 允许访问 选择 指定用户 xff0c 下面文本框中输入 本地用户和组 中现有的一个用户名即可 注意 xff1a 只能是 本地用户和组 中的用户 xff
  • Android布局 -- Navigation实现底部导航栏

    底部导航栏加页卡的切换 xff0c 很多App采用这种布局设计 xff0c 在以前的开发中 xff0c 需要自定义底部导航栏以及使用FragmentTransaction来管理Fragment的切换 xff0c 代码量较大 xff0c 而使
  • ViewModelProviders is deprecated

    原有的创建ViewModel的方法 xff1a viewModel 61 ViewModelProviders of this get ViewModel class 提示ViewModelProviders过时 改为 xff1a view
  • Android Fragment退出 返回上一个Fragment与直接退出

    例如应用底部有两个导航按钮A与B xff0c 刚进入的时候显示为第一个AFragment xff0c 点击B切换到BFragment 如果需求是在BFragment点击返回键回到AFragment xff0c 需要配置 app defaul
  • Android基础 -- 子线程可以修改UI吗?

    子线程可以修改UI吗 xff1f 为什么会产生这样的问题 xff0c 可能是因为在开发过程中遇到了 34 Only the original thread that created a view hierarchy can touch it
  • leetcode 417. 太平洋大西洋水流问题

    https leetcode cn com problems pacific atlantic water flow 思路是从海洋开始逆流 如果可以逆流到 就标记为1 然后检查两个海洋都可以逆流到的区域 DFS public List lt
  • Android模拟器检测常用方法

    在Android开发过程中 xff0c 防作弊一直是老生常谈的问题 xff0c 而模拟器的检测往往是防作弊中的重要一环 xff0c 接下来有关于模拟器的检测方法 xff0c 和大家进行一个简单的分享 1 传统的检测方法 传统的检测方法主要是
  • RecyclerView 隐藏部分分割线

    在项目中遇到复杂点的RecyclerView xff0c 可能会有隐藏部分分割线的需求 xff0c 例如item1和item3之间的分割线隐藏 xff0c item4和item5之间的分割线隐藏等 在看了文档里的ItemDecoration
  • 浅谈去中心化应用

    1 中心化应用 现在我们所使用的应用基本上都是中心化的应用 xff0c 什么是中心化应用呢 xff0c 举个栗子 xff0c 我们在天猫买东西的时候 xff0c 需要先付款给支付宝 xff0c 然后卖家发货 xff0c 我们确认收货之后 x
  • EGL综述

    参考 xff1a https www khronos org registry EGL specs eglspec 1 5 pdf 什么是EGL EGL是支持多平台 多操作系统的 xff0c 比如安卓 Unix Windows等 为了扩展性
  • Java二分搜索树及其添加删除遍历

    对于树这种结构 xff0c 相信大家一定耳熟能详 xff0c 二叉树 二分搜索树 AVL树 红黑树 线段树 Trie等等 xff0c 但是对于树的应用以及编写一棵解决特定问题的树 xff0c 不少同学都会觉得不是一件简单的事情 xff0c
  • Android自定RadioGroup实现点击切换效果

    一 xff1a java文件 public class SegmentedGroup extends RadioGroup private int mMarginDp private Resources resources private
  • opencv--将本地摄像头数据转换成ip摄像头数据流,并在客户端获取该流进行显示

    项目介绍 xff1a 在本项目中 xff0c 实现从本地摄像头获取数据帧 xff0c 然后将其转换成ip摄像头数据流并在客户端通过opencv代码实时获取该图像数据进行显示 xff1a 当然也能在浏览器通过输入地址进行视频的访问 方式一 x
  • 8. &amp;和&amp;&amp;的区别?

    答 xff1a amp 运算符有两种用法 xff1a 1 按位与 xff1b 2 逻辑与 amp amp 运算符是短路与运算 逻辑与跟短路与的差别是非常巨大的 xff0c 虽然二者都要求运算符左右两端的布尔值都是true整个表达式的值才是t
  • 记InheritedWidget使用思考

    InheritedWidget 是项目中必不可少的组件 xff0c 用户数据共享 老生常谈的Provider框架也是基于InheritedWidget实现的 简介 InheritedWidget组件是功能性组局 xff0c 实现了由上向下共

随机推荐