准备阶段

1. 首先安装对应定位所需要使用的 npm 包,这里我们使用 react-native-geolocation-service

//安装
yarn add react-native-geolocation-service

2. 配置权限(下面以安卓为例)

• 在 你的项目名\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" />

3. 接入 高德开放平台 使用 webapi 服务
   https://lbs.amap.com/api/webservice/summary/

4. 创建应用并选择 we服务 并使用

   
   
   image.png

image.png

image.png

• 根据你的使用需要进行相关信息填写选择

  
  
  image.png

如何使用

1. 使用应用的 key 调用相关服务(以下为简单调用演示,其他调用方法请参考官方文档)

• 官方指南:https://lbs.amap.com/api/webservice/guide/api/georegeo

演示如下:

高德地图根据地理名称获取相关信息的请求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 中使用

1. 在需要使用的页面,我们使用以下代码可以得到手机目前的 定位 情况

// 相关使用文档请参考: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 }
  );
};

2. 我们根据上面的经纬度,我们可以再去相关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"
}