問題

uniapp開發的小程序需要獲取當前城市名稱

解決步驟

看文檔

當然是看uniapp文檔，我們查到有提供相關的API,即uni.getLocation(OBJECT)，獲取當前的地理位置、速度。

我們試試吧

uni.getLocation({
    type: 'wgs84',
    geocode:true,
    success: function (res) {
        console.log('當前位置的經度：' + res.longitude);
        console.log('當前位置的緯度：' + res.latitude);
    }
});

我們發現只能返回經緯度信息，並不會返回城市信息。

==原來是隻有app才支持geocode==
哈哈事情沒有想象中那麼簡單~

思考ing...

查閲了相關資料，原來是位置詳細信息的一些保密協議，並不能直接獲取到。那麼我們就需要通過經緯度，利用騰訊地圖JavaScript SDK逆地址解析,即輸入座標返回地理位置信息。

有方法了，開整

逆地址解析

1. 創建應用

打開騰訊地圖開放平台，創建應用

然後
控制枱 ->應用管理 -> 我的應用 ->添加key-> 勾選

小程序SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的權限
授權ip即當前連接服務的IP地址（注意：上線後這個一定要換成上線IP地址哦）
填入微信小程序appid

現在有了地圖秘鑰key

2. uniapp配置

1. pages.json配置
   加入以下配置項，用於申請獲得位置權限

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息將用於小程序位置接口的效果展示" 
    }
}

2. uniapp配置
   
   這裏填寫的描述信息就是微信彈起信息微信授權彈框的描述信息
   

3. 代碼部分

下載微信小程序JavaScriptSDK

var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
// 實例化API核心類
var qqmapsdk = new QQMapWX({
    key: '' // 必填
});

key即申請的騰訊地圖秘鑰key

uni.getLocation({
            type: 'gcj02',
            geocode: true,
            success: function (res) {
                //逆地址解析  座標轉地址信息
                qqmapsdk.reverseGeocoder({
                  //Object格式
                       location: {
                         latitude: res.latitude,
                         longitude: res.longitude
                       }, 
                    success: function(res) {//成功後的回調
                       const mapdata=res.result.ad_info;
                       that.city = mapdata.city;
                   },fail: function(error) {
                       console.error(error);
                     },
                     complete: function(res) {
                       //console.log(res);
                     }
                });
                
            }
        });

編譯

我們看返回信息

現在是有返回當前位置詳細信息了，當前也包括城市名稱。

問題解決！

總結

遇到問題並不可怕，可怕的是停滯不前，知難而退。只有發現問題才能解決問題，才會得到成長和鍛鍊。人生的路總是一波三折，代碼也是，風雨之後總會見到彩虹的，加油！