uniapp微信小程序獲取當前城市名稱逆地址解析實例教程
更新時間：2022年11月22日 11:22:55 作者：清風無影Q
最近在用uni-app開發(fā)小程序,需要獲取用戶所在城市,小程序本身沒有這樣的api,那么怎么實現呢?下面這篇文章主要給大家介紹了關于uniapp微信小程序獲取當前城市名稱逆地址解析的相關資料,需要的朋友可以參考下
問題
uniapp開發(fā)的小程序需要獲取當前城市名稱
解決步驟
看文檔
當然是看uniapp文檔，我們查到有提供相關的API,即uni.getLocation(OBJECT)，獲取當前的地理位置、速度。
我們試試吧
uni.getLocation({
type: 'wgs84',
geocode:true,
success: function (res) {
console.log('當前位置的經度：' + res.longitude);
console.log('當前位置的緯度：' + res.latitude);
}
});我們發(fā)現只能返回經緯度信息，并不會返回城市信息。
原來是只有app才支持geocode
哈哈事情沒有想象中那么簡單~
思考ing…
查閱了相關資料，原來是位置詳細信息的一些保密協議，并不能直接獲取到。那么我們就需要通過經緯度，利用騰訊地圖JavaScript SDK逆地址解析,即輸入坐標返回地理位置信息。
有方法了，開整
逆地址解析
1. 創(chuàng)建應用
打開騰訊地圖開放平臺，創(chuàng)建應用
然后
控制臺 ->應用管理 -> 我的應用 ->添加key-> 勾選
小程序SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的權限
授權ip即當前連接服務的IP地址（注意：上線后這個一定要換成上線IP地址哦）
填入微信小程序appid
現在有了地圖秘鑰key
2. uniapp配置 pages.json配置
加入以下配置項，用于申請獲得位置權限
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
}
uniapp配置
這里填寫的描述信息就是微信彈起信息微信授權彈框的描述信息
3. 代碼部分
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);
}
});
}
});
編譯
我們看返回信息
現在是有返回當前位置詳細信息了，當前也包括城市名稱。
問題解決！
總結
到此這篇關于uniapp微信小程序獲取當前城市名稱逆地址解析的文章就介紹到這了,更多相關uniapp微信小程序獲取城市名稱內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JavaScript獲得指定對象大小的方法,涉及javascript針對元素遍歷與屬性操作的相關技巧,需要的朋友可以參考下2015-07-07
在LayUI圖片上傳中,解決由跨域問題引起的請求接口錯誤的方法
今天小編就為大家分享一篇在LayUI圖片上傳中,解決由跨域問題引起的請求接口錯誤的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
由淺到深了解JavaScript類...2007-01-01
微信小程序開發(fā)越來越多樣化,各種豐富的設計及體驗,自定義tabBar也經常使用,下面這篇文章主要給大家介紹了關于微信小程序如何自定義tabBar的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了javascript實現全局匹配并替換的方法的總結，十分的簡單實用，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了webpack的tree shaking的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了javascript cookie的簡單應用，我們先介紹一下cookie的使用，以及我后面簡單封裝一個cookie操作的單例，便于實現cookie的設置，獲取，刪除的方法，感興趣的小伙伴們可以參考一下2016-02-02
淺談javascript中的Function和Arguments
下面小編就為大家?guī)硪黄獪\談javascript中的Function和Arguments。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了javascript繼承，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了javascript鼠標放上后下邊對應內容變換的方法,實例分析了javascript實現tab切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08