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


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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
JS手写一个自定义Promise操作示例
Mar 16 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
给多个地址发邮件的类
2006/10/09 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
php加密解密实用类分享
2014/01/07 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
详解python进行mp3格式判断
2016/12/23 Python
python3中str(字符串)的使用教程
2017/03/23 Python
点球小游戏python脚本
2018/05/22 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
表扬稿格式范文
2015/01/16 职场文书