問題
uniapp開發(fā)的小程序需要獲取當(dāng)前城市名稱
解決步驟
看文檔
當(dāng)然是看uniapp文檔，我們查到有提供相關(guān)的API,即uni.getLocation(OBJECT)，獲取當(dāng)前的地理位置、速度。
在這里插入圖片描述
我們試試吧
uni.getLocation({
type: 'wgs84',
geocode:true,
success: function (res) {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
}
});
我們發(fā)現(xiàn)只能返回經(jīng)緯度信息，并不會(huì)返回城市信息。
在這里插入圖片描述
==原來是只有app才支持geocode==
哈哈事情沒有想象中那么簡單~
思考ing...
查閱了相關(guān)資料，原來是位置詳細(xì)信息的一些保密協(xié)議，并不能直接獲取到。那么我們就需要通過經(jīng)緯度，利用騰訊地圖JavaScript SDK逆地址解析,即輸入坐標(biāo)返回地理位置信息。
有方法了，開整
逆地址解析
1. 創(chuàng)建應(yīng)用
打開騰訊地圖開放平臺(tái)，創(chuàng)建應(yīng)用
在這里插入圖片描述
然后
控制臺(tái) ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選
在這里插入圖片描述
小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限授權(quán)ip即當(dāng)前連接服務(wù)的IP地址（注意：上線后這個(gè)一定要換成上線IP地址哦）填入微信小程序appid
在這里插入圖片描述
現(xiàn)在有了地圖秘鑰key
2. uniapp配置
- pages.json配置
加入以下配置項(xiàng)，用于申請獲得位置權(quán)限
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
}
- uniapp配置
微信小程序配置項(xiàng)里填寫的描述信息就是微信彈起信息微信授權(quán)彈框的描述信息
在這里插入圖片描述
3. 代碼部分
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
key: '' // 必填
});
key即申請的騰訊地圖秘鑰key
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function (res) {
//逆地址解析 坐標(biāo)轉(zhuǎn)地址信息
qqmapsdk.reverseGeocoder({
//Object格式
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(res) {//成功后的回調(diào)
const mapdata=res.result.ad_info;
that.city = mapdata.city;
},fail: function(error) {
console.error(error);
},
complete: function(res) {
//console.log(res);
}
});
}
});
編譯
同意獲取地理位置
我們看返回信息
在這里插入圖片描述
現(xiàn)在是有返回當(dāng)前位置詳細(xì)信息了，當(dāng)前也包括城市名稱。
問題解決！
總結(jié)
遇到問題并不可怕，可怕的是停滯不前，知難而退。只有發(fā)現(xiàn)問題才能解決問題，才會(huì)得到成長和鍛煉。人生的路總是一波三折，代碼也是，風(fēng)雨之后總會(huì)見到彩虹的，加油！
六年代碼兩茫茫，不思量，自難忘
6年資深前端主管一枚，只分享技術(shù)干貨，項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)
關(guān)注博主不迷路~
