uniapp微信小程序獲取當前定位城市信息的實例代碼
更新時間:2022年08月22日 11:16:11 作者:Flyer_741
因為uniapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點,下面這篇文章主要給大家介紹了關于uniapp微信小程序獲取當前定位城市信息的相關資料,需要的朋友可以參考下
一、事先準備
此處用的是騰訊地圖的jdk


1、在騰訊地圖開發(fā)上申請key
2、 WebServiceAPI選擇簽名校驗獲取SK
3、 uniapp上勾選位置接口
4、在騰訊地圖上下載微信小程序javaScript SDK放入項目里
二、正式代碼使用
提示:可能會出現(xiàn)引入jdk時報錯
解決方法:
*把jdk最后一行暴漏方式改為export default 引入時用import就行了*
// 1、首先在需要用到的地方引入下載的jdk
import QQMapWx from '../../common/qqmap-wx-jssdk.min.js'
// 2、通過騰訊地圖key初始化
const qqmapSdk = new QQMapWx({
key: 'xxxxxxx' // 在騰訊地圖上申請的key
})
// 3、獲取微信定位授權(quán)方法
getAuthorize () {
uni.authorize({
scope: 'scope.userLocation',
success: (res) => {
this.getLocation()
},
fail: (err) => {
uni.showModal({
content: '需要授權(quán)位置信息',
confirmText: '確認授權(quán)'
}).then(res => {
if (res['confirm']) {
uni.openSetting({
success: res => {
if (res.authSetting['scope.userLocation']) {
uni.showToast({
title: '授權(quán)成功',
icon: 'none'
})
} else {
uni.showToast({
title: '授權(quán)失敗',
icon: 'none'
})
}
this.getLocation()
}
})
}
if (res['cancel']) {
// 取消授權(quán)
this.getLocation()
}
})
}
})
}
// 4、開始獲取定位方法
getLocation () {
uni.getLocation({
type: 'gcj02',
success: (res) => {
const { latitude, longitude } = res
qqmapSdk.reverseGeocoder({
location: latitude ? `${latitude},${longitude }` : '',
sig: 'xxxx', // 這個sig就是上面要準備的第二項SK
success: (val) => {
console.log('這就是要獲取的當前所在城市的相關信息', val)
},
fail: (err) => {
console.log('獲取城市失敗')
}
})
},
fail: (err) => {
if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err.errMsg === 'getLocation:fail system permission denied') {
uni.showModal({
content: '請開啟手機定位服務',
showCancel: false
})
} else if (err.errMsg === 'getLocation:fail:system permission denied') {
uni.showModal({
content: '請給微信開啟定位權(quán)限',
showCancel: false
})
}
}
})
}
補充:UNIAPP獲取當前城市和坐標
uni.getLocation({
type: 'wgs84',
success: res=> {
console.log(res)
console.log('當前位置的經(jīng)度:' + res.longitude);
console.log('當前位置的緯度:' + res.latitude);
}
});總結(jié)
到此這篇關于uniapp微信小程序獲取當前定位城市信息的文章就介紹到這了,更多相關uniapp小程序獲取定位城市內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關文章
jquery SweetAlert插件實現(xiàn)響應式提示框
為了滿足用戶體驗度,使用SweetAlert插件實現(xiàn)響應式提示框效果非常好,下面通過這篇文章給大家介紹jquery SweetAlert插件實現(xiàn)響應式提示框,需要的朋友可以參考下2015-08-08

