微信小程序獲取當(dāng)前位置和城市名
1, 獲取當(dāng)前地理位置,首先要拿到用戶的授權(quán)wx.openSetting;
2,微信的getLocation接口,獲取當(dāng)前用戶的地理位置(微信返回的是經(jīng)緯度,速度等參數(shù));
3,微信沒有將經(jīng)緯度直接轉(zhuǎn)換為地理位置,借用騰訊位置服務(wù)中關(guān)于微信小程序的地理轉(zhuǎn)換JS SDK 的API(返回信息中包括國家,省,市,區(qū),經(jīng)緯度等地理位置)
步驟描述清楚以后,下面就開始按步驟操作了;(本文僅僅講述如何獲取用戶地理位置的授權(quán))
圖示為獲取用戶地理位置授權(quán)彈窗
在用戶首次進入某頁面(需要地理位置授權(quán))時候,在頁面進行onLoad,onShow時候,進行調(diào)用wx.getLocation要求用戶進行授權(quán);以后每次進入該頁面時,通過wx.getSetting接口,返回用戶授權(quán)具體信息。
wx.getSetting接口具體API地址鏈接為點擊打開鏈接
上圖中scope.userLocation就是地理授權(quán)的標志;
當(dāng)該標志是underfind,表示用戶初次進入該頁面,當(dāng)該標志是false,表示用戶初次進入該頁面拒絕了地理授權(quán),應(yīng)進行重新要求獲取授權(quán)。
wx.getSetting({ success: (res) => { console.log(JSON.stringify(res)) // res.authSetting['scope.userLocation'] == undefined 表示 初始化進入該頁面 // res.authSetting['scope.userLocation'] == false 表示 非初始化進入該頁面,且未授權(quán) // res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán) if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { wx.showModal({ title: '請求授權(quán)當(dāng)前位置', content: '需要獲取您的地理位置,請確認授權(quán)', success: function (res) { if (res.cancel) { wx.showToast({ title: '拒絕授權(quán)', icon: 'none', duration: 1000 }) } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授權(quán)成功', icon: 'success', duration: 1000 }) //再次授權(quán),調(diào)用wx.getLocation的API } else { wx.showToast({ title: '授權(quán)失敗', icon: 'none', duration: 1000 }) } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //調(diào)用wx.getLocation的API } else { //調(diào)用wx.getLocation的API } } })
在拿到用戶授權(quán)以后,使用微信的API獲取當(dāng)前位置的經(jīng)緯度微信獲取位置API
這里,我們進行使用的是騰訊位置服務(wù);專為小程序開發(fā)者提供LBS數(shù)據(jù)服務(wù)工具包,可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計算等數(shù)據(jù)。
1,得到開發(fā)者秘鑰
2,下載微信小程序javaScriptSDK,
3,安全域名設(shè)置,在“設(shè)置” -> “開發(fā)設(shè)置”中設(shè)置request合法域名,添加http://api.map.qq.com
在文件中引入對應(yīng)的javaScriptSDK文件
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); var qqmapsdk;
在文件中進行js調(diào)用
最后的結(jié)果就是可以獲得自己所在城市的具體位置了
index.js部分的代碼
//index.js //獲取應(yīng)用實例 const app = getApp(); var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ data: { province: '', city: '', latitude: '', longitude: '' }, onLoad: function () { qqmapsdk = new QQMapWX({ key: 'XXXX-XXXX-XXXX-XXXX' //這里自己的key秘鑰進行填充 }); }, onShow: function () { let vm = this; vm.getUserLocation(); }, getUserLocation: function () { let vm = this; wx.getSetting({ success: (res) => { console.log(JSON.stringify(res)) // res.authSetting['scope.userLocation'] == undefined 表示 初始化進入該頁面 // res.authSetting['scope.userLocation'] == false 表示 非初始化進入該頁面,且未授權(quán) // res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán) if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { wx.showModal({ title: '請求授權(quán)當(dāng)前位置', content: '需要獲取您的地理位置,請確認授權(quán)', success: function (res) { if (res.cancel) { wx.showToast({ title: '拒絕授權(quán)', icon: 'none', duration: 1000 }) } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授權(quán)成功', icon: 'success', duration: 1000 }) //再次授權(quán),調(diào)用wx.getLocation的API vm.getLocation(); } else { wx.showToast({ title: '授權(quán)失敗', icon: 'none', duration: 1000 }) } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //調(diào)用wx.getLocation的API vm.getLocation(); } else { //調(diào)用wx.getLocation的API vm.getLocation(); } } }) }, // 微信獲得經(jīng)緯度 getLocation: function () { let vm = this; wx.getLocation({ type: 'wgs84', success: function (res) { console.log(JSON.stringify(res)) var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy; vm.getLocal(latitude, longitude) }, fail: function (res) { console.log('fail' + JSON.stringify(res)) } }) }, // 獲取當(dāng)前地理位置 getLocal: function (latitude, longitude) { let vm = this; qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: function (res) { console.log(JSON.stringify(res)); let province = res.result.ad_info.province let city = res.result.ad_info.city vm.setData({ province: province, city: city, latitude: latitude, longitude: longitude }) }, fail: function (res) { console.log(res); }, complete: function (res) { // console.log(res); } }); } })
頁面展示部分的代碼
<!--index.wxml--> <view class="retailStore"> <view class="cnaps borderBottom"> <text>所在城市</text> <input class='m-bbt' placeholder-class='plhStyle' type='number' maxlength='50' placeholder='' bindinput="bindKeyInput" value='{{province}} {{city}}' disabled></input> </view> </view>
總結(jié)
以上所述是小編給大家介紹的微信小程序獲取當(dāng)前位置和城市名,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
js實現(xiàn)iframe自動自適應(yīng)高度的方法
這篇文章主要介紹了js實現(xiàn)iframe自動自適應(yīng)高度的方法,涉及javascript操作iframe框架的技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02Quasar Input:type="number" 去掉上下小箭頭 實現(xiàn)加減按鈕樣式功能
這篇文章主要介紹了Quasar Input:type="number" 去掉上下小箭頭 實現(xiàn)加減按鈕樣式,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法
這篇文章主要介紹了JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript手寫源碼之實現(xiàn)arrify轉(zhuǎn)數(shù)組
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)arrify轉(zhuǎn)數(shù)組,文中的示例代碼講解詳細,對我們學(xué)習(xí)JavaScript有一點的幫助,需要的可以參考一下2023-02-02