1. 獲取用戶當(dāng)前所在城市信息

在開(kāi)發(fā)的時(shí)候經(jīng)常需要獲取用戶當(dāng)前所在的位置信息,比如省市,郵編,附近的酒店,影院等,這時(shí)候就需要通過(guò)小程序自帶的方法和百度地圖api:

1. 通過(guò)微信小程序wx.getLocation接口獲取用戶當(dāng)前位置經(jīng)度和緯度;
2. 通過(guò)百度地圖逆地理API,將獲取的經(jīng)度和緯度轉(zhuǎn)化為城市名稱;

1.1 獲取定位信息(經(jīng)度和緯度)

獲取用戶位置前,需要用戶允許,也就是需要彈出彈窗獲取用戶權(quán)限,需要在app.json中配置如下權(quán)限:
用戶授權(quán)官方文檔

"permission": {
   "scope.userLocation": {
     "desc": "您的位置信息將用于小程序獲取影院信息" 
   }
 }

授權(quán)彈窗

配置權(quán)限成功以后,在用戶第一次啟動(dòng)小程序的時(shí)候,會(huì)彈出授權(quán)彈窗,在用戶點(diǎn)擊允許以后,在調(diào)用wx.getLocation時(shí)在success中會(huì)返回當(dāng)前的地理信息; 如果用戶點(diǎn)擊不允許,在getLocation中就會(huì)返回failure(獲取位置信息失敗);

1.2 微信小程序網(wǎng)絡(luò)請(qǐng)求

在使用百度地圖逆地理API通過(guò)經(jīng)度和緯度獲取城市的時(shí)候,需要調(diào)用wx.request api來(lái)發(fā)起網(wǎng)絡(luò)請(qǐng)求.

1.2.1 網(wǎng)絡(luò)請(qǐng)求域名配置

每個(gè)微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信。包括普通 HTTPS 請(qǐng)求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

域名配置官方文檔鏈接
配置百度地圖域名示例

配置成功示例

1.2.2 發(fā)送網(wǎng)絡(luò)請(qǐng)求wx.request

直接使用wx.request發(fā)送網(wǎng)絡(luò)請(qǐng)求,示例代碼如下:

wx.request({
  url: 'test.php', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

wx.request接口及參數(shù)說(shuō)明官方文檔

1.3 百度地圖逆地理api的使用

在獲取經(jīng)度和緯度成功以后,通過(guò)百度地圖的api,將經(jīng)度和緯度作為參數(shù),可以獲得當(dāng)前城市信息,城市名稱,街道,位置等相關(guān)信息,以下是請(qǐng)求鏈接示例:
百度地圖web端逆地理api文檔

 http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194   
 //GET請(qǐng)求 

需要傳入的參數(shù):

1. ak : 應(yīng)用的ak
2. output: 返回參數(shù)的類型(一般為json)
3. coordtype: 坐標(biāo)系類型 微信的getLocation參數(shù)type為wgs84返回:gps坐標(biāo),所以獲取的精度和緯度是使用的gps坐標(biāo)
4. location:位置(經(jīng)度+緯度)

1.3.1 創(chuàng)建百度地圖應(yīng)用 申請(qǐng)AK

首先要申請(qǐng)一個(gè) AK :申請(qǐng)鏈接

image.png

創(chuàng)建成功以后會(huì)有應(yīng)用編號(hào)和ak等信息,在請(qǐng)求逆地理api的時(shí)候使用.

1.4 wx.getLocation及wx.request的使用

1.4.1 獲取經(jīng)緯度及逆地理獲取城市

getCity:function(success){
    wx.getLocation({
      type: 'wgs84',
      altitude: true,
      success: (result) => {
        wx.db.ToastSuccess('獲取位置成功');
        wx.request({
          url: 'https://api.map.baidu.com/reverse_geocoding/v3',
          data: {
            ak:'8TxcPq4YTwDSfLUgA09d',
            output:'json',
            coordtype:'wgs84ll',
            location:`${result.latitude},${result.longitude}`
            // location: res.latitude + ',' + res.longitude  
          },
          success: (cityResult) => {
            //console.log(cityResult);
            let city = cityResult.data.result.addressComponent.city;
            city = city.substring(0,city.length - 1);
            console.log('城市:',city);
            success && success(city);
          },
          fail: () => {},
          complete: () => {}
        });
      },
      fail: () => {
        wx.db.ToastError('獲取位置失敗');
      },
      complete: () => {}
    });
   },  

image.png