微信小程序获取地理位置及经纬度授权代码实例


Posted in Javascript onSeptember 18, 2019

这篇文章主要介绍了微信小程序获取地理位置及经纬度授权代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序获取地理位置授权,首先需要在app.json中添加配置:

"permission": {
  "scope.userLocation": {
   "desc": "请确认授权"
  }
 }

获取经纬度:如果手机未开启位置信息,那么授权成功后在wx.getLocation()方法中也会一直失败,所以需要在fail方法中提示用户开启手机位置信息

getUserLocation: function () {
    let vm = this
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false  表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true  表示 地理位置授权
        // 拒绝授权后再次进入重新授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          // console.log('authSetting:status:拒绝授权后再次进入重新授权', res.authSetting['scope.userLocation'])
          wx.showModal({
            title: '',
            content: '【泰福利Lite】需要获取你的地理位置,请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none'
                })
                setTimeout(() => {
                  wx.navigateBack()
                }, 1500)
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    // console.log('dataAu:success', dataAu)
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      //再次授权,调用wx.getLocation的API
                      vm.getLocation(dataAu)
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none'
                      })
                      setTimeout(() => {
                        wx.navigateBack()
                      }, 1500)
                    }
                  }
                })
              }
            }
          })
        }
        // 初始化进入,未授权
        else if (res.authSetting['scope.userLocation'] == undefined) {
          // console.log('authSetting:status:初始化进入,未授权', res.authSetting['scope.userLocation'])
          //调用wx.getLocation的API
          vm.getLocation(res)
        }
        // 已授权
        else if (res.authSetting['scope.userLocation']) {
          // console.log('authSetting:status:已授权', res.authSetting['scope.userLocation'])
          //调用wx.getLocation的API
          vm.getLocation(res)
        }
      }
    })
  },
  // 微信获得经纬度
  getLocation: function (userLocation) {
    let vm = this
    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        // console.log('getLocation:success', res)
        var latitude = res.latitude
        var longitude = res.longitude
        vm.getDaiShu(latitude, longitude)
      },
      fail: function (res) {
        // console.log('getLocation:fail', res)
        if (res.errMsg === 'getLocation:fail:auth denied') {
          wx.showToast({
            title: '拒绝授权',
            icon: 'none'
          })
          setTimeout(() => {
            wx.navigateBack()
          }, 1500)
          return
        }
        if (!userLocation || !userLocation.authSetting['scope.userLocation']) {
          vm.getUserLocation()
        } else if (userLocation.authSetting['scope.userLocation']) {
          wx.showModal({
            title: '',
            content: '请在系统设置中打开定位服务',
            showCancel: false,
            success: result => {
              if (result.confirm) {
                wx.navigateBack()
              }
            }
          })
        } else {
          wx.showToast({
            title: '授权失败',
            icon: 'none'
          })
          setTimeout(() => {
            wx.navigateBack()
          }, 1500)
        }
      }
    })
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue生命周期的探索
Apr 03 Javascript
layui复选框限制选择个数的方法
Sep 18 #Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 #Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 #Javascript
Vue Components 数字键盘的实现
Sep 18 #Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 #Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 #Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python中self原理实例分析
2015/04/30 Python
python中__slots__用法实例
2015/06/04 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
大学学雷锋活动总结
2014/06/26 职场文书
家长学校培训材料
2014/08/20 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
工厂标语大全
2014/10/06 职场文书
党员评议思想汇报
2014/10/08 职场文书
民事调解协议书
2016/03/21 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android