微信小程序地理定位功能實(shí)現(xiàn)
1.地理定位介紹
小程序地理定位是指通過(guò)小程序開發(fā)平臺(tái)提供的 API
,來(lái)獲取用戶的地理位置信息。用戶在使用小程序時(shí),可以授權(quán)小程序獲取自己的地理位置信息
wx.getLocation()
:獲取當(dāng)前的地理位置
wx.chooseLocation()
:打開地圖選擇位置
1.1 申請(qǐng)開通
暫時(shí)只對(duì)部分類目的小程序開放,需要先通過(guò)類目審核,然后在小程序管理后臺(tái),「開發(fā)」-「開發(fā)管理」-「接口設(shè)置」中自助開通該接口權(quán)限。
1.2 使用方法
- 在 app.json 中配置
requiredPrivateInfos
進(jìn)行聲明啟用 - 在調(diào)用
wx.getLocation()
時(shí)需要在 app.json 配置permission
字段,同時(shí)使用scope.userLocation
聲明收集用戶選擇的位置信息的目的,wx.chooseLocation()
接口不需要配置該字段,可以直接進(jìn)行調(diào)用 - 在配置好以后,調(diào)用
wx.getLocation()
和wx.chooseLocation()
接口
在 app.json
中進(jìn)行配置
{ "requiredPrivateInfos": [ "getLocation", "chooseLocation" ], "permission": { "scope.userLocation": { "desc": "獲取用戶位置信息用于填寫收貨地址" } } }
參考文檔:
getLocation 使用 :
// 地理定位 async onLocation() { // 獲取 緯度 、精度 const { latitude, longitude } = await wx.getLocation() console.log(location) }
chooseLocation 使用:
// 地理定位 async onLocation() { // 打開地圖選擇位置,獲取 緯度 、精度 const { latitude, longitude } = await wx.chooseLocation() console.log(res) }
2.拒絕授權(quán)后的解決方案
在調(diào)用 wx.getLocation()
獲取用地理位置時(shí),如果用戶選擇拒絕授權(quán),代碼會(huì)直接拋出錯(cuò)誤。
在拒絕授權(quán)以后,再次調(diào)用 wx.getLocation()
時(shí),就不會(huì)在彈窗詢問(wèn)用戶是否允許授權(quán)。
接下來(lái),就需要優(yōu)化授權(quán)的流程:
代碼如下:
方法里面的提示框,比如:wx.modal,wx.toast是自己在原生的基礎(chǔ)上進(jìn)一步封裝的,自己用的時(shí)候可以用原生的即可,以自身項(xiàng)目業(yè)務(wù)為準(zhǔn),以下代碼僅做參考:
// 獲取用戶地理位置信息 async onLocation() { // 調(diào)用 getSetting 方法獲取用戶所有的授權(quán)信息 // 返回的 authSetting 包含小程序已向小程序申請(qǐng)過(guò)的權(quán)限已經(jīng)授權(quán)結(jié)果(true、false) const { authSetting } = await wx.getSetting() console.log(authSetting) // scope.userLocation 是否已經(jīng)授權(quán)獲取地理位置的信息 // 如果之前沒(méi)有申請(qǐng)過(guò)返回 undefined,需要調(diào)用 getLocation // 如果之前同意了授權(quán),返回 true,需要調(diào)用 getLocation // 如果之前拒絕了授權(quán),返回 false,需要用戶手動(dòng)進(jìn)行授權(quán) // 等于 true,或者不等于 undefined,說(shuō)明需要進(jìn)行授權(quán) // const isAuth = // authSetting['scope.userLocation'] || // authSetting['scope.userLocation'] === undefined // 為了避免冗余的條件判斷,使用 !! 把代碼進(jìn)行優(yōu)化 const isAuth = !!authSetting['scope.userLocation'] if (!isAuth) { // 彈窗詢問(wèn)用戶是否進(jìn)行授權(quán) const modalRes = await wx.modal({ title: '授權(quán)提示', content: '需要需要您的地理位置信息,請(qǐng)確認(rèn)授權(quán)' }) // 如果用戶點(diǎn)擊了取消,說(shuō)明用戶拒絕了授權(quán),給用戶提示 if (!modalRes) return wx.toast({ title: '您拒絕了授權(quán)' }) // 如果用戶點(diǎn)擊了確定,調(diào)用 wx.openSetting 打開微信客戶端小程序授權(quán)頁(yè)面 // 并返回授權(quán)以后的結(jié)果 const { authSetting } = await wx.openSetting() // 如果用戶沒(méi)有更新授權(quán)信息,提示沒(méi)有更新授權(quán) if (!authSetting['scope.userLocation']) return wx.toast({ title: '授權(quán)失敗!' }) try { // 如果用戶更新授權(quán)信息,則調(diào)用 getLocation 獲取用戶地理位置信息 const locationRes = await wx.getLocation() // 打印地理位置信息 console.log(locationRes) } catch (err) { console.log(err) } } else { try { // 如果是第一次調(diào)用 getLocation 或者之前授權(quán)過(guò) // 直接調(diào)用 getLocation 獲取用戶信息即可 const locationRes = await wx.getLocation() console.log(locationRes) } catch (error) { wx.toast({ title: '您拒絕授權(quán)獲取地址位置' }) } } }
3.開通騰訊位置服務(wù)
使用wx.chooseLocation()
能夠很方便的讓用戶來(lái)選擇地理位置,但是wx.chooseLocation()
返回的數(shù)據(jù)并沒(méi)有包含省市區(qū)、省市區(qū)編碼數(shù)據(jù)。
這時(shí)候我們可以使用 騰訊位置服務(wù) 將返回的經(jīng)度、緯度進(jìn)行逆地址解析,轉(zhuǎn)換成詳細(xì)地址。
騰訊位置服務(wù)專為小程序開發(fā)提供了 JavaScript SDK,方便開發(fā)者在小程序中可以使用騰訊地圖服務(wù)。
使用騰訊位置服務(wù)可以很方便的讓開發(fā)者實(shí)現(xiàn)地址解析、逆地址解析等功能。
使用步驟:
申請(qǐng)開發(fā)者密鑰(key):申請(qǐng)密鑰
開通 webserviceAPI 服務(wù):控制臺(tái) → 應(yīng)用管理→我的應(yīng)用 → 添加 key →勾選 WebServiceAPI →保存
下載微信小程序 JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
安全域名設(shè)置
在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置 request 合法域名
詳細(xì)步驟:
1.申請(qǐng)密鑰:密鑰申請(qǐng),微信掃碼進(jìn)行登錄,選擇綁定已有賬號(hào)、或者注冊(cè)新賬號(hào) (需要綁定手機(jī)、驗(yàn)證郵箱)
2. 開通webserviceAPI服務(wù):控制臺(tái) ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選WebServiceAPI -> 保存→ 創(chuàng)建完成
3.下載微信小程序 JavaScriptSDK v1.2,下載將 .js
文件放到小程序的 libs
目錄下
4.安全域名設(shè)置,在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名,添加https://apis.map.qq.com,或者點(diǎn)擊微信開發(fā)者工具中的暫時(shí)不校驗(yàn)域名
4.LBS 逆地址解析
LBS 逆地址解析是指通過(guò)地理坐標(biāo)查找對(duì)應(yīng)位置的詳細(xì)地址信息。LBS 是 Location-Based Services 的縮寫,翻譯為中文就是基于地理位置的服務(wù)。
對(duì)于 LBS 逆地址解析,通常是輸入地理坐標(biāo)(經(jīng)度和緯度),系統(tǒng)會(huì)返回地理位置的具體地址,如國(guó)家、省份、城市、街道、建筑等信息。
比如說(shuō),你有一個(gè)經(jīng)緯度為(114.21892734521,29.575429778924)的坐標(biāo),通過(guò) LBS 逆地址解析,你可以得到這個(gè)坐標(biāo)對(duì)應(yīng)的實(shí)際地址,可能是 "中國(guó)湖北省武漢市XXX區(qū)XXX路XXX號(hào)"。
使用步驟:
在項(xiàng)目中引入 SDK 核心類(上面已經(jīng)下載的微信小程序JavaScriptSDK)
// var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); //這個(gè)地址看自己項(xiàng)目,一般是在工作目錄的根目錄下建libs文件夾,哪里需要在哪引入即可 import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'
在 onLoad
中實(shí)例化 API 核心類,同時(shí)配置創(chuàng)建的 key
// 引入SDK核心類,js文件根據(jù)自己業(yè)務(wù),位置可自行放置 import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min' Page({ onLoad: function () { // 實(shí)例化API核心類,把實(shí)例掛載到this上,方便其他方法中使用 this.qqmapsdk = new QQMapWX({ key: '申請(qǐng)的key' }) } // coding... }
使用實(shí)例方法 reverseGeocoder
方法進(jìn)行逆地址解析,將提供的坐標(biāo)轉(zhuǎn)換為詳細(xì)的地址位置信息
// LBS 地址逆解析 // 地理定位 async onLocation() { // 獲取 緯度 、精度 // const { latitude, longitude } = await wx.getLocation() // console.log(location) // 獲取經(jīng)、緯度、name用戶搜索的地點(diǎn)名稱 let { latitude, longitude, name } = await wx.chooseLocation() // 使用 reverseGeocoder 方法進(jìn)行逆地址解析 this.qqmapsdk.reverseGeocoder({ // 傳入經(jīng)、緯度 location: { latitude, longitude }, // 逆地址解析成功后執(zhí)行 success: (res) => { // 獲取選擇的 const { street_number } = res.result.address_component // province 省 city 市 district 區(qū) const { province, // 省 city, // 市 district, // 區(qū) adcode, // 行政區(qū)劃代碼 city_code, // 城市代碼,由國(guó)家碼+行政區(qū)劃代碼(提出城市級(jí)別)組合而來(lái),總共為9位 nation_code // 國(guó)家代碼 } = res.result.ad_info this.setData({ // 省級(jí): 前兩位有值,后4位置0,如,河北省: 130000 provinceCode: adcode.replace(adcode.substring(2, 6), '0000'), provinceName: province, // 市前面多個(gè)國(guó)家代碼,需要進(jìn)行截取 cityCode: city_code.slice(nation_code.length), cityName: city, // 東莞市、中山市、修州市、嘉關(guān)市 因其下無(wú)區(qū)縣級(jí), districtCode: district && adcode, districtName: district, // 詳細(xì)地址 address: name, fullAddress: [province, city, district, address].join('') }) } }) }
注意事項(xiàng):
逆地址解析解析初始用的時(shí)候發(fā)現(xiàn)解析不成功,需要配置接口的調(diào)用額度:
到此這篇關(guān)于微信小程序之地理定位功能的文章就介紹到這了,更多相關(guān)微信小程序地理定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 教你用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡
- 微信小程序天氣預(yù)報(bào)功能實(shí)現(xiàn)(支持自動(dòng)定位,附源碼)
- 微信小程序地圖定位的實(shí)現(xiàn)方法實(shí)例
- uni-app?開發(fā)微信小程序定位功能
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置
- 微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)
- 微信小程序頁(yè)面滾動(dòng)到指定位置代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
相關(guān)文章
微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢?2011-01-01vscode使用Prettier Code插件的詳細(xì)教程
這篇文章主要介紹了vscode使用Prettier Code插件的詳細(xì)教程,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09js判斷出兩個(gè)字符串最大子串的函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷出兩個(gè)字符串最大子串的函數(shù)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11用js實(shí)現(xiàn)的自定義的對(duì)話框的實(shí)現(xiàn)代碼
javascript alert函數(shù)的替代方案,一個(gè)自定義的對(duì)話框的方法2010-03-03JavaScript中判斷為整數(shù)的多種方式及保留兩位小數(shù)的方法
這篇文章主要介紹了JavaScript中判斷為整數(shù)的多種方式,以及保留兩位小數(shù)的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09微信小程序?qū)崿F(xiàn)上傳多個(gè)文件 超過(guò)10個(gè)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳多個(gè)文件,超過(guò)10個(gè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02