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


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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
js 颜色选择插件
Jan 23 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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
建立动态的WML站点(二)
2006/10/09 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP7 list() 函数修改
2021/03/09 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
js Dom实现换肤效果
2017/10/21 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python实现贪吃蛇游戏
2020/03/21 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
送货司机岗位职责
2013/12/11 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
门市房租房协议书
2014/12/04 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
管理失职检讨书范文
2015/05/05 职场文书