uniapp开发小程序怎样获取用户地理位置

1、需求阐明

需求：点击按钮获取当前微信位置，以及点击拒绝授权后，下次点击还可以拉起授权窗口；
2、言归正传

1、编写代码
模板部分

1. <template>
2.   <view>
3.     <button type="" @click="getLocation">获取位置</button>
4.     <view>经度：{{x}}</view>
5.     <view>纬度：{{y}}</view>
6.   </view>
7. </template>

复制代码

script部分

1. <script>
2.     export default {
3.       data () {
4.         return {
5.           x: 0,
6.           y: 0
7.         }
8.       },
9.       methods: {
10.         getLocation () {
11.           let that = this
12.           // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
13.           uni.getSetting({
14.             success (res) {
15.               console.log(res)
16.               // 如果没有授权
17.               if (!res.authSetting['scope.userLocation']) {
18.                 // 则拉起授权窗口
19.                 uni.authorize({
20.                   scope: 'scope.userLocation',
21.                   success () {
22.                     //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
23.                     uni.getLocation({
24.                       type: 'wgs84',
25.                       success: function (res) {
26.                         that.x = res.longitude
27.                         that.y = res.latitude
28.                         console.log(res)
29.                         console.log('当前位置的经度：' + res.longitude)
30.                         console.log('当前位置的纬度：' + res.latitude)
31.                         uni.showToast({
32.                           title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
33.                           icon: 'success',
34.                           mask: true
35.                         })
36.                       }, fail (error) {
37.                         console.log('失败', error)
38.                       }
39.                     })
40.                   },
41.                   fail (error) {
42.                     //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
43.                     console.log('拒绝授权', error)
45.                     uni.showModal({
46.                       title: '提示',
47.                       content: '若点击不授权，将无法使用位置功能',
48.                       cancelText: '不授权',
49.                       cancelColor: '#999',
50.                       confirmText: '授权',
51.                       confirmColor: '#f94218',
52.                       success (res) {
53.                         console.log(res)
54.                         if (res.confirm) {
55.                           // 选择弹框内授权
56.                           uni.openSetting({
57.                             success (res) {
58.                               console.log(res.authSetting)
59.                             }
60.                           })
61.                         } else if (res.cancel) {
62.                           // 选择弹框内 不授权
63.                           console.log('用户点击不授权')
64.                         }
65.                       }
66.                     })
67.                   }
68.                 })
69.               } else {
70.                 // 有权限则直接获取
71.                 uni.getLocation({
72.                   type: 'wgs84',
73.                   success: function (res) {
74.                     that.x = res.longitude
75.                     that.y = res.latitude
76.                     console.log(res)
77.                     console.log('当前位置的经度：' + res.longitude)
78.                     console.log('当前位置的纬度：' + res.latitude)
79.                     uni.showToast({
80.                       title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
81.                       icon: 'success',
82.                       mask: true
83.                     })
84.                   }, fail (error) {
85.                     uni.showToast({
86.                       title: '请勿频繁调用！',
87.                       icon: 'none',
88.                     })
89.                     console.log('失败', error)
90.                   }
91.                 })
92.               }
93.             }
94.           })
95.         }
96.       },
97.     }
98. </script>

复制代码

2、在manifest.json新增如下配置
原因：因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途阐明，则将无法正常调用地理位置相关接口；
解决办法： 在manifest.json文件中，mp-weixin属性下配置permission获取地理位置的权限

1. "permission" : {
2.     "scope.userLocation" : {
3.         "desc" : "你的位置信息将用于小程序位置接口的效果展示"
4.     }
5. },
6. "requiredPrivateInfos" : [ "chooseAddress", "getLocation", "chooseLocation" ]

复制代码

3、运行测试

点击不授权

点击授权，跳转到授权页面，修改为利用时允许

重新获取位置信息
成功获取到用户的地理位置，那么就可以调用后端接口将经纬度存储到服务端利用了

3、结语

1.以上就是今天分享的全部内容，小伙伴们别忘记点赞关注~
2.需要留意的是一定要进行在manifest.json文件中配置，否则会如下错误

3.如果是需要上线的小程序，需要在微信公众平台开发管理->接口设置中开通接口wx.getLocation的权限，否则考核代码时候会不通过
4.制作不易，一键四连再走吧，您的支持永久是我最大的动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。