准备阶段
- 首先安装对应定位所需要使用的 npm 包,这里我们使用 react-native-geolocation-service
//安装
yarn add react-native-geolocation-service
- 配置权限(下面以安卓为例)
- 在 你的项目名\android\app\src\main\AndroidManifest.xml文件 路径下添加如下权限代码
<!--用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<!--用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!--用于访问网络，网络定位需要上网-->
<uses-permission android:name="android.permission.INTERNET" />
接入 高德开放平台 使用 webapi 服务
https://lbs.amap.com/api/webservice/summary/-
创建应用并选择 we服务 并使用
image.png
image.png
image.png
-
根据你的使用需要进行相关信息填写选择
image.png
如何使用
- 使用应用的 key 调用相关服务(以下为简单调用演示,其他调用方法请参考官方文档)
演示如下:
高德地图根据地理名称获取相关信息的请求URL
https://restapi.amap.com/v3/geocode/geo请求方式
- get
请求Query参数
参数名 示例值 必选 类型 说明 address 北京市朝阳区阜通东大街6号 是 string 无 key 你的应用Key 是 string 你的应用Key
//返回结果如下:
{
"status": "1",
"info": "OK",
"infocode": "10000",
"count": "1",
"geocodes": [
{
"formatted_address": "北京市朝阳区阜通东大街6号",
"country": "中国",
"province": "北京市",
"citycode": "010",
"city": "北京市",
"district": "朝阳区",
"township": [],
"neighborhood": {
"name": [],
"type": []
},
"building": {
"name": [],
"type": []
},
"adcode": "110105",
"street": "阜通东大街",
"number": "6号",
"location": "116.482086,39.990496",
"level": "门牌号"
}
]
}
React Native 中使用
- 在需要使用的页面,我们使用以下代码可以得到手机目前的 定位 情况
// 相关使用文档请参考:https://www.npmjs.com/package/react-native-geolocation-service
const getAppNavigator = () => {
Geolocation.getCurrentPosition(
(position) => {
console.log("当前位置", position);
},
(error) => {
console.log(error.code, error.message);
//我这里输出以下信息
/**
* 当前位置 {"coords": {"accuracy": 1, "altitude": 0, "heading": 0, "latitude": 30.574195, "longitude": 104.075, "speed": 0}, "mocked": false, "provider": "gps", "timestamp": 1666202205000}
*/
},
{ enableHighAccuracy: false, timeout: 10000, maximumAge: 3000 }
);
};
- 我们根据上面的经纬度,我们可以再去相关API接口调用
高德地图根据经纬度坐标获取位置请求URL
https://restapi.amap.com/v3/geocode/regeo请求方式
- get
请求Query参数
参数名 示例值 必选 类型 说明 key 你的应用Key 是 string 你的应用Key location 104.075,30.574195 是 string 经纬度坐标
//返回信息如下:
{
"status": "1",
"regeocode": {
"addressComponent": {
"city": "成都市",
"province": "四川省",
"adcode": "510104",
"district": "锦江区",
"towncode": "510104015000",
"streetNumber": {
"number": "50号",
"location": "104.074220,30.575987",
"direction": "西北",
"distance": "212.798",
"street": "锦城大道"
},
"country": "中国",
"township": "柳江街道",
"businessAreas": [
[]
],
"building": {
"name": [],
"type": []
},
"neighborhood": {
"name": [],
"type": []
},
"citycode": "028"
},
"formatted_address": "四川省成都市锦江区柳江街道瓦库39(复地金融岛店)成都高新技术产业开发区(南区)"
},
"info": "OK",
"infocode": "10000"
}
