uni-app中位置授权以及打开地图选择位置功能的实现

最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能，看起来好像很难，其实并不难，我在网上看了一些优秀博主的博客，只要跟着步骤一步步来就能实现，下面是我在实现该功能后做的一次总结，希望能帮到更多的小伙伴~

一、实现位置授权功能

实现的效果图：

 实现步骤：

1. 登录小程序官网获取AppID(用自己的小程序账号登录):

[开发 ->开发设置 -> 复制AppID]

2. 注册并登录腾讯地图api获取key:

 [控制台->我的应用->创建应用->填写信息->添加Key]

 

实现代码

<template>
<view>
<view class="address" @click="goMap">
<uni-icons type="location-filled" size="25"></uni-icons>
<span>{{location}}</span>
<uni-icons type="bottom" size="18"></uni-icons>
</view>
</view>
</template>

<script>
export default {
data() {
return {
location:'重庆市'
};
},
methods:{
goMap(){
const that = this
// uniapp 需要先调取用户授权请求询问用户是否授权
uni.authorize({
scope:'scope.userLocation',
success(res){
uni.chooseLocation({
success:function(res){
// console.log('位置名称:' + res.name);
// console.log('详细地址:' + res.address);
that.location = res.name;
}
})
},
fail(err){
uni.$showMsg('获取位置失败&#xff01;')
}
})
}
}
}
</script>

<style lang="scss">
.address {
padding: 0 5px;
}
</style>

 参考文档

uni.authorize(OBJECT) | uni-app官网

uni.getLocation(OBJECT) | uni-app官网

注意：要勾选位置接口