uni-app中实现位置授权以及打开地图选择位置功能
注意点：this的指向问题，是否指向vc决定你能否拿到data里面的数据
template
<button @click="chooseLocation">打开地图选择位置</button>
js
export default {
data() {
return {
address: ''
};
},
methods: {
// 打开地图选择位置
chooseLocation() {
// 此处拿到的this才是指向vc
const that = this;
// 发起授权请求
uni.authorize({
// 授权权限
scope: 'scope.userLocation',
success() {
// 打开地图选择位置
uni.chooseLocation({
success(res) {
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
that.address = res.address;
// 此处如果直接使用this, 是无法获取到data里面的数据的，因为此处this指向不是vc
}
});
},
fail(e) {
console.log(e);
let errMsgTit = '';
if (e.errMsg === 'authorize:fail 系统错误，错误码：-12006,auth deny') {
errMsgTit = '你已拒绝授权，是否跳转至设置页面开启权限';
}
uni.showModal({
title: '提示',
content: `${
errMsgTit}`,
success(res) {
if (res.confirm) {
// 获取设置页面权限信息
uni.getSetting({
success(res) {
console.log(res.authSetting);
// 判断是否开启获取位置权限
if (!res.authSetting['scope.userLocation']) {
// 如果没有开启，点击确认后打开设置页面
uni.openSetting({
});
}
}
});
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
});
}
};
</script>
效果图
