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


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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
精读《Vue3.0 Function API》
May 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中使用Oracle数据库(1)
2006/10/09 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python单元测试unittest实例详解
2015/05/11 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
解决python对齐错误的方法
2020/07/16 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
JSF的标签库有哪些
2012/04/27 面试题
校园奶茶店创业计划书
2014/01/23 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
公司2014年度工作总结
2014/12/10 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
作息时间调整通知
2015/04/22 职场文书
入党培养人考察意见
2015/06/08 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书