您的位置:首页 > Web前端 > React

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

2018-10-26 15:47 597 查看
版权声明:原创文章,转载请说明出处 https://blog.csdn.net/Destiny_strive/article/details/83413954

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

地理编码/逆地理编码 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”。详情可以参考

    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的距离

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: