需求背景

小程序需要用戶授權(quán)獲取用戶位置，獲取到經(jīng)緯度請(qǐng)求數(shù)據(jù)列表并解析為城市地址，用戶選擇城市時(shí)把城市解析為經(jīng)緯度。

代碼實(shí)現(xiàn)(項(xiàng)目基于 Taro+react )

1.獲取用戶授權(quán) （微信小程序文檔-指南-開放能力-用戶信息-授權(quán)）

小程序授權(quán)類接口調(diào)用時(shí)：

1. 如果用戶未接受或拒絕過此權(quán)限，會(huì)彈窗詢問。

2. 如果用戶已授權(quán)，可直接調(diào)用接口。

3. 如果用戶已拒絕授權(quán)，則不會(huì)出現(xiàn)彈窗，而是直接進(jìn)入接口fail回調(diào)。

   export default {
   pages: [
     'pages/index/index',
   ],
   permission: {
     "scope.userLocation": {
       "desc": "是否允許獲取你當(dāng)前的地理位置信息？"
     }
   },
   }
   
   復(fù)制代碼

   效果：

   

2.獲取用戶位置經(jīng)緯度

api介紹：

• wx.getSetting(): 獲取用戶當(dāng)前的授權(quán)狀態(tài)

• wx.getLocation(): 獲取當(dāng)前的地理位置、速度。當(dāng)用戶離開小程序后，此接口無法調(diào)用。

  // 判斷用戶當(dāng)前授權(quán)狀態(tài)
  getCurrentLocation = () => {
     const vm = this;
     // 判斷用戶是否授權(quán)獲取地理位置
     wx.getSetting({
       success: (res) => {
         // res.authSetting['scope.userLocation'] == undefined    表示 初始化進(jìn)入該頁面
         // res.authSetting['scope.userLocation'] == false    表示 非初始化進(jìn)入該頁面,且未授權(quán)
         // res.authSetting['scope.userLocation'] == true    表示 地理位置授權(quán)
         if (
           res.authSetting["scope.userLocation"] != undefined &&
           res.authSetting["scope.userLocation"] == false
         ) {
           // 非第一次進(jìn)入頁面且未授權(quán),可根據(jù)需求在此處做操作
           
         } else {
          // 獲取用戶位置經(jīng)緯度
           vm.getLocation();
         }
       },
     })
   }
   // 獲取用戶位置
   getLocation() {
     const that = this;
     wx.getLocation({
       type: "gcj02",
       success(res) {
       // res包含用戶位置經(jīng)緯度、speed等
         const latitude = res.latitude;
         const longitude = res.longitude;
         that.setState({
           latitude,
           longitude,
         });
       },
       fail(res) {
         // 用戶未給定位權(quán)限，打開城市選擇器
         // 實(shí)踐中發(fā)現(xiàn)安卓和蘋果此處錯(cuò)誤信息不同
         if (
           res.errMsg == "getLocation:fail auth deny" ||
           res.errMsg == "getLocation:fail:auth denied"
         ) {
            that.setState({
             areaOpened: true,
           });
         }
       },
     });
   }
  復(fù)制代碼

  3.將獲取經(jīng)緯度信息解析為具體城市地址

  借助騰訊地圖逆地址解析接口,申請(qǐng)一個(gè)騰訊地圖的key,傳入經(jīng)緯度即可。

  var accessKey = 'xxxxx自己申請(qǐng)一個(gè)騰訊地圖的key'
  var qqMapApi =
           "https://apis.map.qq.com/ws/geocoder/v1/" +
           "?location=" +
           latitude +
           "," +
           longitude +
           "&key=" +
           accessKey +
           "&get_poi=1";
  wx.request({
       url: qqMapApi,
       header: {
         "Content-Type": "application/json",
       },
       data: {},
       method: "GET",
       success: (res) => {
         if (res.statusCode == 200 && res.data.status == 0) {
           // 從返回值中提取需要的業(yè)務(wù)地理信息數(shù)據(jù) 國家、省、市、縣區(qū)、街
           that.setAddress(res.data.result.address_component);
         }
       },
       fail: () => {
         wx.showToast({
           title: "地址解析失敗",
           icon: "none",
         })
       },
     })
  復(fù)制代碼

  4.用戶選擇城市時(shí)需要將城市解析為經(jīng)緯度

  借助騰訊地圖地址解析接口

  var accessKey = 'xxxxx自己申請(qǐng)一個(gè)騰訊地圖的key'
  var qqMapApi =
        "https://apis.map.qq.com/ws/geocoder/v1/?address=" +
        provinceName +
        cityName +
        countyName +
        "&key=" +
        accessKey;
  wx.request({
      url: qqMapApi,
      header: {
        "Content-Type": "application/json",
      },
      data: {},
      method: "GET",
      success: (res) => {
        if (res.statusCode == 200 && res.data.status == 0) {
          that.setState({
            longitude: res.data.result.location.lng,
            latitude: res.data.result.location.lat,
          });
        }
      },
      fail: (res) => {
        wx.hideToast();
        wx.showToast({
          title: "地址解析失敗",
          icon: "none",
        });
      },
    });
  復(fù)制代碼

  5.用戶拒絕授權(quán)后，手動(dòng)打開設(shè)置授權(quán)界面

  用戶可以在小程序設(shè)置界面（「右上角」 - 「關(guān)于」 - 「右上角」 - 「設(shè)置」）中控制對(duì)該小程序的授權(quán)狀態(tài)。

  開發(fā)者可以調(diào)用 wx.openSetting 打開設(shè)置界面，引導(dǎo)用戶開啟授權(quán)。

  wx.openSetting({
      success(res) {
        if (res.authSetting["scope.userLocation"]) {
          // 已授權(quán)
        } else {
          // 未授權(quán)
        }
      },
    });
  復(fù)制代碼

  調(diào)用后可打開：