您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
uni-app微信小程序獲取用戶地理位置信息
發表時間:2020-10-8
發布人:葵宇科技
浏覽次數:90
uni-app 小程序項目無法直接獲取到地理位置,隻能通(tōng)過獲取到的經緯度,調用第三方地圖Api獲取。
1.在 manifest.json - 微信小程序配置 - 填寫微信小程序AppID、選擇位置接口,填寫申請原因
2.選擇第三方地圖Api,因為是做小程序,這裡選擇騰訊地圖
3.注冊、登陸後,在控制台 - key管理中(zhōng)創建秘鑰
4.引入騰訊地圖Api
5.授權調用已經封裝好的方法,獲取經緯度解析出地理位置信息
6.如(rú)果用戶未授權,默認會執行fail回調,所以添加提示框進行重新授權确認
/**
* @Author: licheng
* @Date: 2019/12/21 6:06 下(xià)午
* @Description:
*/
import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js";
const getCity = () => {
return new Promise((resolve, reject) => {
// 獲取授權信息
uni.getSetting({
success: res => {
// console.log(res);
if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {
if (res.authSetting["scope.userLocation"]) {
getCityInfo();
} else {
uni.showModal({
title: "提示",
content: "請重新授權獲取你(nǐ)的地理位置,否則部分功能将無法使用",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: () => getCityInfo()
});
} else {
reject("請授權獲取你(nǐ)的地理位置,否則部分功能将無法使用!");
}
},
});
}
} else {
getCityInfo();
}
}
});
// 獲取地理位置信息
const getCityInfo = () => {
// 騰訊地圖Api
const qqmapsdk = new QQMapWX({ key: "這裡填寫騰訊地圖的秘鑰" });
// 授權
uni.authorize({
scope: "scope.userLocation",
success: () => {
uni.getLocation({
type: "gcj02", // wgs84: 返回GPS坐(zuò)标,gcj02: 返回國測局坐(zuò)标
success: res => {
const {latitude, longitude} = res;
const location = {latitude, longitude};
qqmapsdk.reverseGeocoder({
location,
success: res => resolve(res.result)
});
}
});
},
fail: () => reject("請授權獲取你(nǐ)的位置,否則部分功能将無法使用!"),
});
};
});
};
export default getCity;
轉載:uni-app 小程序項目獲取地理位置