• 技术文章 >微信小程序 >小程序开发

    小程序如何获取用户当前位置

    王林王林2021-01-29 09:58:24转载3342

    php入门到就业线上直播课:进入学习

    有三种方式可以获取用户当前位置:

    (学习视频分享:编程入门

    1、wx.getLocation(多与wx.openLocation一起用)

    获取当前的精度、纬度、速度。不需要授权。当type设置为gcj02 返回可用于wx.openLocation的坐标

    2、wx.chooseLocation

    需要授权,打开地图选择位置

    第一次调用方法时先出现

    6b84ba605b316c6f9fd7c4c0dd88ed5.png

    允许权限之后之后再出现

    7de2f6cd4b86441adf4fc500c751668.png

    如果第一次就不允许,则一直调用wx.chooseLocation的fail方法

    3、wx.openLocation

    需要授权,使用微信内置地图查看位置。多半用于查看起点到终点的路线怎么走

    896b5b727147068ece1032b123916d5.png

    授权方法有三种:

    1、wx.getSetting

    获取用户的当前设置,返回值中只会出现小程序已经向用户请求过的权限,类似下面的样子

    526660c3a5f34984c36249ea9286230.png

    2、wx.openSetting

    调起权限设置选择界面,设置界面只会出现小程序已经向用户请求过的权限,类似下面的样子

    ca9cc912ca8e6327c5a29625ba24bb4.png

    3、wx.authorize

    提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。,类似下面的样子

    093443c1680d5d0e8552c4a98d42e19.png

    这就是wx.authorize出现的内容

    问题来了:假如我第一次使用wx.chooseLocation()获取权限被拒绝,然后使用wx.getSetting()来重新获取权限该怎么做呢?

    思路:wx.chooseLocation()有fail方法,如果第一次拒绝之后,以后调用选择地图都是触发的这个,那么我可以在fail方法里面,使用wx.getSetting(),这样就每次都能判断是否已经给与了权限了。

    第一步:由于有可能会多次使用定位的方法,所以我把定位的方法写到App.js中,方便调用

    App({
        //获取用户地理位置权限
        getPermission:function(obj){
          wx.chooseLocation({
            success: function (res) {    
                obj.setData({
                    addr: res.address      //调用成功直接设置地址
                })                
            },
            fail:function(){
                wx.getSetting({
                    success: function (res) {
                        var statu = res.authSetting;
                        if (!statu['scope.userLocation']) {
                            wx.showModal({
                                title: '是否授权当前位置',
                                content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
                                success: function (tip) {
                                    if (tip.confirm) {
                                        wx.openSetting({
                                            success: function (data) {
                                                if (data.authSetting["scope.userLocation"] === true) {
                                                    wx.showToast({
                                                        title: '授权成功',
                                                        icon: 'success',
                                                        duration: 1000
                                                    })
                                                    //授权成功之后,再调用chooseLocation选择地方
                                                    wx.chooseLocation({
                                                        success: function(res) {
                                                            obj.setData({
                                                                addr: res.address
                                                            })
                                                        },
                                                    })
                                                } else {
                                                    wx.showToast({
                                                        title: '授权失败',
                                                        icon: 'success',
                                                        duration: 1000
                                                    })
                                                }
                                            }
                                        })
                                    }
                                }
                            })
                        }
                    },
                    fail: function (res) {
                        wx.showToast({
                            title: '调用授权窗口失败',
                            icon: 'success',
                            duration: 1000
                        })
                    }
                })
            }
        })        
       },})

    第二步:在需要获取地址的页面中:

    var app = getApp();
    Page({
       data:{
            addr:'请选择位置'         
        },
        //选择获取地理位置
        getAddress:function(){
              var that=this;
          app.getPermission(that);    //传入that值可以在app.js页面直接设置内容        }, 
    })

    最终效果图:

    86aace44f021d2c2f3218cd6509ab93.png

    最终在手机上获取到的位置偏差不太大。

    更新 wx.openSetting 的注意事项。

    2.3.0 版本开始,用户发生点击行为后,才可以跳转打开设置页,管理授权信息

    即2.3.0版本之后,我通过上面的wx.showModal的回调函数来调用wx.openSetting 会发生下面的错误:

    5bc3727a6dafb0acc9ad2c0ffe11baa.png

    openSetting:fail can only be invoked by user TAP gesture.

    但是我测试 2.2.4 开始 到2.3.1 都会出现上面这种错误。

    2.3.2及以上又不会出现这种问题。。。。。。。。

    而且当我测试2.0.8 到 2.2.3 会出现下面的错误。。。。。。

    53f4c5303acbc417687d7b4874f8707.png

    其它的就没有这问题了。搞不懂。。。

    相关推荐:小程序开发教程

    以上就是小程序如何获取用户当前位置的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:小程序 位置 用户
    上一篇:怎么实现小程序多图上传功能 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• JS获取用户当前位置• 微信小程序之获取当前位置经纬度以及地图显示• h5页面如何调用百度地图获取当前位置(代码)• 织梦“当前位置”怎么修改
    1/1

    PHP中文网