uni-app微信小程序获取用户地理位置信息
发表时间:2020-10-8
发布人:葵宇科技
浏览次数:124
uni-app 小程序项目无法直接获取到地理位置,只能通过获取到的经纬度,调用第三方地图Api获取。
1.在 manifest.json - 微信小程序配置 - 填写微信小程序AppID、选择位置接口,填写申请原因
2.选择第三方地图Api,因为是做小程序,这里选择腾讯地图
3.注册、登陆后,在控制台 - key管理中创建秘钥
4.引入腾讯地图Api
5.授权调用已经封装好的方法,获取经纬度解析出地理位置信息
6.如果用户未授权,默认会执行fail回调,所以添加提示框进行重新授权确认
/**
* @Author: licheng
* @Date: 2019/12/21 6:06 下午
* @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: "请重新授权获取你的地理位置,否则部分功能将无法使用",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: () => getCityInfo()
});
} else {
reject("请授权获取你的地理位置,否则部分功能将无法使用!");
}
},
});
}
} else {
getCityInfo();
}
}
});
// 获取地理位置信息
const getCityInfo = () => {
// 腾讯地图Api
const qqmapsdk = new QQMapWX({ key: "这里填写腾讯地图的秘钥" });
// 授权
uni.authorize({
scope: "scope.userLocation",
success: () => {
uni.getLocation({
type: "gcj02", // wgs84: 返回GPS坐标,gcj02: 返回国测局坐标
success: res => {
const {latitude, longitude} = res;
const location = {latitude, longitude};
qqmapsdk.reverseGeocoder({
location,
success: res => resolve(res.result)
});
}
});
},
fail: () => reject("请授权获取你的位置,否则部分功能将无法使用!"),
});
};
});
};
export default getCity;
转载:uni-app 小程序项目获取地理位置