小編給大家分享一下微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于微信小程序?qū)嵗韩@取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。
1. 獲取當(dāng)前地理位置,可通過(guò)wx.getLocation接口,返回經(jīng)緯度、速度等信息;
注意---它的默認(rèn)工作機(jī)制:
首次進(jìn)入頁(yè)面,調(diào)用該api,返回用戶授權(quán)結(jié)果,并保持該結(jié)果。只要用戶未刪除該小程序或變更授權(quán)情況,那么用戶再次進(jìn)入該頁(yè)面,授權(quán)結(jié)果還是不變,且不會(huì)再次調(diào)用該API;
在不刪除小程序的情況下,繼續(xù)再次發(fā)起授權(quán)請(qǐng)求,需要使用wx.openSetting。
所以第一步要拿到用戶的授權(quán)wx.openSetting;
2. 第二步,可通過(guò)wx.getLocation接口,返回經(jīng)緯度、速度等信息;
3. 微信沒(méi)有將經(jīng)緯度直接轉(zhuǎn)換為地理位置,可借助騰訊位置服務(wù)中關(guān)于微信小程序的地理轉(zhuǎn)換JS SDK的API或者百度API (我使用的百度API)
在用戶首次進(jìn)入某頁(yè)面(需要地理位置授權(quán))時(shí)候,在頁(yè)面進(jìn)行在onShow時(shí),進(jìn)行調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán);以后每次進(jìn)入該頁(yè)面時(shí),通過(guò)wx.getSetting接口,返回用戶授權(quán)具體信息。
代碼如下:
onShow: function () { var _this = this; //調(diào)用定位方法 _this.getUserLocation(); }, //定位方法 getUserLocation: function () { var _this = this; wx.getSetting({ success: (res) => { // res.authSetting['scope.userLocation'] == undefined 表示 初始化進(jìn)入該頁(yè)面 // res.authSetting['scope.userLocation'] == false 表示 非初始化進(jìn)入該頁(yè)面,且未授權(quán) // res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán) if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { //未授權(quán) wx.showModal({ title: '請(qǐng)求授權(quán)當(dāng)前位置', content: '需要獲取您的地理位置,請(qǐng)確認(rèn)授權(quán)', success: function (res) { if (res.cancel) { //取消授權(quán) wx.showToast({ title: '拒絕授權(quán)', icon: 'none', duration: 1000 }) } else if (res.confirm) { //確定授權(quán),通過(guò)wx.openSetting發(fā)起授權(quán)請(qǐng)求 wx.openSetting({ success: function (res) { if (res.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授權(quán)成功', icon: 'success', duration: 1000 }) //再次授權(quán),調(diào)用wx.getLocation的API _this.geo(); } else { wx.showToast({ title: '授權(quán)失敗', icon: 'none', duration: 1000 }) } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //用戶首次進(jìn)入頁(yè)面,調(diào)用wx.getLocation的API _this.geo(); } else { console.log('授權(quán)成功') //調(diào)用wx.getLocation的API _this.geo(); } } }) }, // 獲取定位城市 geo: function () { var _this = this; wx.getLocation({ type: 'wgs84', success: function (res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy wx.request({ url: 'http://api.map.baidu.com/geocoder/v2/?ak=xxxxxxxxxxxx&location=' + res.latitude + ',' + res.longitude + '&output=json', data: {}, header: { 'Content-Type': 'application/json' }, success: function (ops) { console.log('定位城市:', ops.data.result.addressComponent.city) }, fail: function (resq) { wx.showModal({ title: '信息提示', content: '請(qǐng)求失敗', showCancel: false, confirmColor: '#f37938' }); }, complete: function () { } }) } }) },
效果圖:首次進(jìn)入頁(yè)面
拒絕授權(quán)后,再次進(jìn)入該頁(yè)面或者點(diǎn)擊頁(yè)面某按鈕(獲取位置)綁定JS
以上兩個(gè)彈出框的結(jié)構(gòu)是一樣的,前者使用的是wx.getLocation接口自帶的樣式,后者使用的wx.showModel接口帶的樣式。
簡(jiǎn)單講一下授權(quán)原理:首次進(jìn)入該頁(yè)面,onshow調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán);用戶拒絕后,再次進(jìn)入該頁(yè)面,我們通過(guò)wx.getSetting接口,返回用戶授權(quán)的情況。
res.authSetting['scope.userLocation']的值與true比較,為true就是授權(quán)了,false就是拒絕授權(quán)了。
以上是“微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱:微信小程序中怎樣獲取當(dāng)前城市位置及再次授權(quán)地理位置的代碼實(shí)現(xiàn)-創(chuàng)新互聯(lián)
文章分享:http://jinyejixie.com/article24/jsgce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、微信小程序、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容