uniapp獲取位置信息,獲取到的信息為經(jīng)緯度,再通過轉(zhuǎn)換成地址信息
1.使用uni.getLocation()獲取位置信息
2.下載qqmap-wx-jssdk.js插件插件下載地址
3.使用騰訊位置服務器對經(jīng)緯度進行一個地址信息轉(zhuǎn)換(自己創(chuàng)建一個應用即可)
全都勾選上
4.注意??!關鍵之處??! 一定要在微信公眾號平臺上 服務器配置 apis.map.qq.com
上代碼
template
<view><button @click="getLocation">獲取位置</button></view>
js
methods: {
// 獲取當前位置
getLocation() {
const that = this;
// 獲取位置信息
uni.getLocation({
type: 'wgs84',
success(res) {
// 經(jīng)緯度轉(zhuǎn)化地址信息
const qqmap = require('@/pages/qqmap-wx-jssdk.min.js');
const showmap = new qqmap({
key: 'NWSBZ-ZUME4-LLTU6-XSQGB-YBKAT-U4FCZ'
});
// 逆地址解析reverseGeocoder
showmap.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(result) {
// 地址信息
const adres = result.result.address;
that.address = adres;
console.log(adres);
// 此處使用的this不是指向vc
// 所在在頭部先獲取到this復制給that
}
});
},
fail(e) {
let errMsgTit = '';
if (e.errMsg === 'getLocation:fail auth deny') {
errMsgTit = '你已拒絕授權(quán),是否跳轉(zhuǎn)至設置頁面開啟權(quán)限';
} else {
errMsgTit = '操作頻繁提示,建議搭配onLocationChange()使用';
}
uni.showModal({
title: '提示',
content: `${errMsgTit}`,
success(res) {
if (res.confirm) {
// 獲取設置頁面權(quán)限信息
uni.getSetting({
success(res) {
console.log(res.authSetting);
// 判斷是否開啟獲取位置權(quán)限
if (!res.authSetting['scope.userLocation']) {
// 如果沒有開啟,點擊確認后打開設置頁面
uni.openSetting({});
}
}
});
console.log('用戶點擊確定');
} else if (res.cancel) {
console.log('用戶點擊取消');
}
}
});
}
});
}
}
效果圖文章來源:http://www.zghlxwxcb.cn/news/detail-547519.html
完結(jié)~
不當之處望指點文章來源地址http://www.zghlxwxcb.cn/news/detail-547519.html
到了這里,關于uni-app獲取位置信息(經(jīng)緯度轉(zhuǎn)換地址信息)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!