(简单详细)React Native获取手机当前经纬度，(通过高德地图接口)获取当前地理位置

要获取手机的当前地理位置，首先要获得经纬度，然后通过逆地理编码获得位置信息

地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口，提供结构化地址与经纬度之间的相互转化的能力。

1.AndroidManifest.xml加入权限

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

2.这里调用getCurrentPosition 方法得到经纬度，这里我把得到的经纬度保存到state中对应的longitude和latitude里面。

再调用高德地图的接口,通过逆地理接口返回位置信息（下面放了完整代码，直接复制全部然后覆盖app.js启动就能看到效果了）

（这里有个我遇到的很大的坑：react native版本为0.57.4的时候(也就是我现在的版本)，

我用import Geolocation from 'Geolocation';导入会运行报错的，具体错误有好几个。

比如：

1.module:metro-react-native-babel-preset 找不到，但是这个东西已经淘汰被babel-preset-react-native替代了，但是我两个都npm install还是要说con't not find module:metro-react-native-babel-preset，把metro-react-native-babel-preset删除了也还是抱这个错误，真是气死人了。

2.还有就是谜之500错误，真的难受。

3.另外我在版本为0.55.4的项目中使用import Geolocation from 'Geolocation';方式导入是能用的，也能获取经纬度。但我新建一个项目为版本是0.57.4，我把版本改为0.55.4也报错con't not find module:metro-react-native-babel-preset，阴魂不散啊，对新手太不友好了，难受+10086！！！

var Geolocation = require('Geolocation');

这种方式导入也会运行报错。错误都跟import Geolocation from 'Geolocation';这种方式导入出现的错误差不多。）

app.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';

export default class App extends Component {

   state = {
        longitude:'',//经度
        latitude:'',//纬度
        position:'',//位置名称
    };

    componentWillMount = () => {
        this.getPositions();
    };

    getPositions=()=>{
        return new Promise(() => {
            /** 获取当前位置信息 */
            navigator.geolocation.getCurrentPosition(
                location => {
                    this.setState({
                        longitude: location.coords.longitude,//经度
                        latitude: location.coords.latitude,//纬度
                    });
                    //通过调用高德地图逆地理接口，传入经纬度获取位置信息
                    fetch(`http://restapi.amap.com/v3/geocode/regeo?key=97c933e33025b3843b40016900074704&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        body: ``
                    })
                        .then((response) => response.json())
                        .then((jsonData) => {
                            try {
                                this.setState({
                                    position:jsonData.regeocode.formatted_address,
                                });
                                alert(jsonData.regeocode.formatted_address)
                            }catch (e) {

                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                    //访问网络结束
                },
                error => {
                    console.error(error);
                }
            );

        })
    }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>经度：{this.state.longitude}</Text>
        <Text style={styles.instructions}>纬度：{this.state.latitude}</Text>
        <Text style={styles.instructions}>当前位置：{this.state.position}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

3.拼接的参数含义可查看https://lbs.amap.com/api/webservice/guide/api/georegeo，

另外key=97c933e33025b3843b40016900074704是需要自己添加的，

打开应用管理 http://lbs.amap.com/dev/key/app ，添加新key即可（添加的key时候注意key的类型）

http://restapi.amap.com/v3/geocode/regeo
?key=97c933e33025b3843b40016900074704
&location=${this.state.longitude},${this.state.latitude}
&radius=1000
&extensions=all
&batch=false
&roadlevel=0`

这是我复制过来的高德地图逆地理的接口请求参数表和返回类型表

逆地理编码API服务地址->

https://restapi.amap.com/v3/geocode/regeo?

请求参数：

参数名	含义	规则说明	是否必须	缺省值
key	高德Key	用户在高德地图官网申请Web服务API类型Key	必填	无
location	经纬度坐标	传入内容规则：经度在前，纬度在后，经纬度间以“,”分割，经纬度小数点后不要超过 6 位。如果需要解析多个经纬度的话，请用"\|"进行间隔，并且将 batch 参数设置为 true，最多支持传入 20 对坐标点。每对点坐标之间用"\|"分割。	必填	无
poitype	返回附近POI类型	以下内容需要 extensions 参数为 all 时才生效。逆地理编码在进行坐标解析之后不仅可以返回地址描述，也可以返回经纬度附近符合限定要求的POI内容（在 extensions 字段值为 all 时才会返回POI内容）。设置 POI 类型参数相当于为上述操作限定要求。参数仅支持传入POI TYPECODE，可以传入多个POI TYPECODE，相互之间用“\|”分隔。该参数在 batch 取值为 true 时不生效。获取 POI TYPECODE 可以参考POI分类码表	可选	无
radius	搜索半径	radius取值范围在0~3000，默认是1000。单位：米	可选	1000
extensions	返回结果控制	extensions 参数默认取值是 base，也就是返回基本地址信息； extensions 参数取值为 all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息。	可选	base
batch	批量查询控制	batch 参数设置为 true 时进行批量查询操作，最多支持 20 个经纬度点进行批量地址查询操作。 batch 参数设置为 false 时进行单点查询，此时即使传入多个经纬度也只返回第一个经纬度的地址解析查询结果。	可选	false
roadlevel	道路等级	以下内容需要 extensions 参数为 all 时才生效。可选值：0，1 当roadlevel=0时，显示所有道路当roadlevel=1时，过滤非主干道路，仅输出主干道路数据	可选	无
sig	数字签名	请参考数字签名获取和使用方法	可选	无
output	返回数据格式类型	可选输入内容包括：JSON，XML。设置 JSON 返回结果数据将会以JSON结构构成；如果设置 XML 返回结果数据将以 XML 结构构成。	可选	JSON
callback	回调函数	callback 值是用户定义的函数名称，此参数只在 output 参数设置为 JSON 时有效。	可选	无
homeorcorp	是否优化POI返回顺序	以下内容需要 extensions 参数为 all 时才生效。 homeorcorp 参数的设置可以影响召回 POI 内容的排序策略，目前提供三个可选参数： 0：不对召回的排序策略进行干扰。 1：综合大数据分析将居家相关的 POI 内容优先返回，即优化返回结果中 pois 字段的poi顺序。 2：综合大数据分析将公司相关的 POI 内容优先返回，即优化返回结果中 pois 字段的poi顺序。	可选	0

返回类型：

名称				含义	规则说明
status				返回结果状态值	返回值为 0 或 1，0 表示请求失败；1 表示请求成功。
info				返回状态说明	当 status 为 0 时，info 会返回具体错误原因，否则返回“OK”。详情可以参考 info状态表
regeocodes				逆地理编码列表	batch 字段设置为 true 时为批量请求，此时 regeocodes 标签返回，标签下为 regeocode 对象列表；batch 为false 时为单个请求，会返回 regeocode 对象；regeocode 对象包含的数据如下：
	formatted_address			结构化地址信息	结构化地址信息包括：省份＋城市＋区县＋城镇＋乡村＋街道＋门牌号码如果坐标点处于海域范围内，则结构化地址信息为：省份＋城市＋区县＋海域信息
	addressComponent			地址元素列表
		province		坐标点所在省名称	例如：北京市
		city		坐标点所在城市名称	当所在城市为北京、上海、天津、重庆四个直辖市时，该字段返回为空当所在城市属于县级市的时候，此字段为空
		citycode		城市编码	例如：010
		district		坐标点所在区	例如：海淀区
		adcode		行政区编码	例如：110108
		township		坐标点所在乡镇/街道（此街道为社区街道，不是道路信息）	例如：燕园街道
		towncode		乡镇街道编码	例如：110101001000
		neighborhood		社区信息列表
			name	社区名称	例如：北京大学
			type	POI类型	例如：科教文化服务;学校;高等院校
		building		楼信息列表
			name	建筑名称	例如：北京大学
			type	类型	例如：科教文化服务;学校;高等院校
		streetNumber		门牌信息列表
			street	街道名称	例如：中关村北二条
			number	门牌号	例如：3号
			location	坐标点	经纬度坐标点：经度，纬度
			direction	方向	坐标点所处街道方位
			distance	门牌地址到请求坐标的距离	单位：米
		seaArea		所属海域信息	例如：渤海
		businessAreas		经纬度所属商圈列表
			businessArea	商圈信息
			location	商圈中心点经纬度
			name	商圈名称	例如：颐和园
			id	商圈所在区域的adcode	例如：朝阳区/海淀区
	roads			道路信息列表	请求参数 extensions 为 all 时返回如下内容
		road		道路信息
			id	道路id
			name	道路名称
			distance	道路到请求坐标的距离	单位：米
			direction	方位	输入点和此路的相对方位
			location	坐标点
	roadinters			道路交叉口列表	请求参数 extensions 为 all 时返回如下内容
		roadinter		道路交叉口
			distance	交叉路口到请求坐标的距离	单位：米
			direction	方位	输入点相对路口的方位
			location	路口经纬度
			first_id	第一条道路id
			first_name	第一条道路名称
			second_id	第二条道路id
			second_name	第二条道路名称
	pois			poi信息列表	请求参数 extensions 为 all 时返回如下内容
		poi		poi信息列表
			id	poi的id
			name	poi点名称
			type	poi类型
			tel	电话
			distance	该POI到请求坐标的距离	单位：米
			direction	方向	为输入点相对建筑物的方位
			address	poi地址信息
			location	坐标点
			businessarea	poi所在商圈名称
	aois			aoi信息列表	请求参数 extensions 为 all 时返回如下内容
		aoi		aoi信息
			id	所属 aoi的id
			name	所属 aoi 名称
			adcode	所属 aoi 所在区域编码
			location	所属 aoi 中心点坐标
			area	所属aoi点面积	单位：平方米
			distance	输入经纬度是否在aoi面之中	0，代表在aoi内其余整数代表距离AOI的距离

(简单详细)React Native获取手机当前经纬度，(通过高德地图接口)获取当前地理位置

猜你喜欢