uni-app?開發(fā)微信小程序定位功能
使用onLocationChange方法持續(xù)監(jiān)聽地址,根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度。
已經(jīng)會(huì)定位的直接跳七、相對(duì)精確的獲取經(jīng)緯度地址
一、注冊(cè)賬號(hào)
把信息都輸入就好了
騰訊位置服務(wù) - 立足生態(tài),連接未來
二、創(chuàng)建應(yīng)用和Key
1.進(jìn)入控制臺(tái)
2.創(chuàng)建應(yīng)用
3.創(chuàng)建Key
啟用產(chǎn)品勾選WebServiceAPI和微信小程序,填寫相應(yīng)信息。
三、登錄微信公眾平臺(tái)后臺(tái)
增加request合法域名:https://apis.map.qq.com
開發(fā)管理 —— 開發(fā)設(shè)置 —— 服務(wù)器域名 ——修改
四、下載微信小程序JavaScriptSDK
下載后放到自己的項(xiàng)目中
微信小程序JavaScript SDK | 騰訊位置服務(wù)
五、代碼實(shí)現(xiàn)
var QQMap = require('../../js_sdk/qqmap-wx-jssdk.min.js') // SDK放置的路徑 var qqmapsdk = new QQMap({ key: '**************' // 自己的Key });
六、一般獲取經(jīng)緯度地址
在比較繁華的地方,一般用這個(gè)就夠了。
wx.getLocation({ type: 'wgs84', success: res => { console.log(res); //獲取到經(jīng)緯度值 qqmapsdk.reverseGeocoder({ // 根據(jù)經(jīng)緯度轉(zhuǎn)化為地址 location: { latitude: res.latitude, longitude: res.longitude }, success: res => { console.log(res); } }) } });
七、相對(duì)精確的獲取經(jīng)緯度地址
1.獲取位置監(jiān)聽的權(quán)限
uni.authorize({ scope: 'scope.userLocation', success(res) { console.log(res); } })
2.開啟位置監(jiān)聽
wx.startLocationUpdate({ success: res => { console.log(res); }, fail: res => { console.log(res); //在這里處理開啟失敗的業(yè)務(wù)邏輯 } })
3.監(jiān)聽實(shí)時(shí)地理位置變化
let index = 0; const _locationChangeFn = function(res) { console.log('location change', res) index++; //res.accuracy 代表定位精度, 這里根據(jù)定位精度和定位次數(shù)進(jìn)行一個(gè)綜合判斷,根據(jù)用戶在當(dāng)前頁面的停留時(shí)間進(jìn)行相應(yīng)的修改 if (index > 10 || (res.accuracy < 35 && index > 5)) { wx.offLocationChange(); wx.stopLocationUpdate(); qqmapsdk.reverseGeocoder({// 根據(jù)經(jīng)緯度轉(zhuǎn)化為地址 location: { //緯度 latitude: res.latitude, //經(jīng)度 longitude: res.longitude }, success: function(res1) { console.log(res1.result); }, fail: function(res1) { console.log(res1); } }) } } //監(jiān)聽實(shí)時(shí)地理位置變化事件 wx.onLocationChange(_locationChangeFn)
這樣定位出來的地址可能差不多,但是經(jīng)緯度要比直接用getLocation獲取到的更準(zhǔn)確。
到此這篇關(guān)于uni-app 開發(fā)微信小程序定位的文章就介紹到這了,更多相關(guān)uni-app小程序定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 教你用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡
- 微信小程序天氣預(yù)報(bào)功能實(shí)現(xiàn)(支持自動(dòng)定位,附源碼)
- 微信小程序地圖定位的實(shí)現(xiàn)方法實(shí)例
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置
- 微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)
- 微信小程序頁面滾動(dòng)到指定位置代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
- 微信小程序地理定位功能實(shí)現(xiàn)
相關(guān)文章
vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼
我想要獲取每一個(gè)循環(huán)并獲取每一個(gè)li(或者其它循環(huán)項(xiàng))的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03Element input樹型下拉框的實(shí)現(xiàn)代碼
這篇文章主要介紹了Element input樹型下拉框的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12