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


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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript生成大小写字母
Jul 03 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js继承实现方法详解
Dec 16 Javascript
javascript history对象详解
Feb 09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 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数据库调用类调用实例(详细注释)
2012/07/12 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
php intval函数用法总结
2019/04/14 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vue自动化表单实例分析
2018/05/06 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
通过shell+python实现企业微信预警
2019/03/07 Python
django Admin文档生成器使用详解
2019/07/22 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
创业计划书之家政服务
2019/09/18 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android