(简单详细)React Native获取手机当前经纬度,(通过高德地图接口)获取当前地理位置
要获取手机的当前地理位置,首先要获得经纬度,然后通过逆地理编码获得位置信息
地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口,提供结构化地址与经纬度之间的相互转化的能力。
1.AndroidManifest.xml加入权限
[code]<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:
[code]/** * 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的类型)
[code]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服务地址->
[code]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”。详情可以参考
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的距离
阅读更多
- 腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
- 通过IP地址获取当前地理位置(腾讯新浪提供的接口)
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- Android高德地图设置中心点图标,通过逆地理编码实时获取中心点的经纬度和详细位置
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- 获取电脑物理地址以及通过IP地址获取当前地理位置(省份)的接口
- React Native获取地理位置(获取具体城市、经纬度)
- 通过IP地址获取当前地理位置(省份)的接口
- React Native获取地理位置(获取具体城市、经纬度)
- HTML5获取地理经纬度并通过百度接口得到实时位置
- 通过IP地址获取当前地理位置(省份)的接口
- 通过IP地址获取当前地理位置(省份)的接口
- android通过高德地图定位sdk获取当前位置的经纬度(只是经纬度哦)
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- 腾讯新浪通过IP地址获取当前地理位置(省份)的接口
- 百度开发者API接口:获取经纬度和详细地理位置(Geocoding API和IP定位API)
- 腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
- 通过经纬度获取地理位置详细信息