uni-app微信小程序uni.getLocation获取经度纬度【定位】

这篇具有很好参考价值的文章主要介绍了uni-app微信小程序uni.getLocation获取经度纬度【定位】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:点击按钮获取当前微信位置,以及点击拒绝授权后,下次点击还可以拉起授权窗口;

拒绝授权后重新拉起授权操作:
uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置

直接授权操作:
uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置

一、问题1:报authorize scope.userLocation需要在app.json中声明permission字段;

uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置
原因:因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无法正常调用地理位置相关接口;
解决办法: 在manifest.json文件中,mp-weixin属性下配置permission获取地理位置的权限
uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置
在HBuilder X配置

uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置
代码如下:

 "mp-weixin" : {
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序位置接口的效果展示"
            }
        },
		"requiredPrivateInfos" : [ "chooseAddress", "getLocation", "chooseLocation" ]
    },

问题2:需要申请使用wx.getLocation的权限,否则审核代码时候会不通过。

申请相关的wx.getLocation权限

申请地址
uni.getlocation,uniapp知识点,uni-app,微信小程序,uni-app获取经度纬度,微信小程序获取经度纬度,uni-app获取定位位置

二、点击进行获取位置: 以上的配置好后,如果直接使用uni.getLocation()方法,不判断是否有获取的权限, 就去获取
,那么第一次获取时候会让你授权,确认则可以获取到;但如果拒绝,则获取不到,且以后都无法唤起授权也无法获取到。
此时就遇到问题3:微信小程序如何在用户拒绝授权申请后再次拉起授权窗口?
解决方法:思路是在用户点击拒绝授权时,添加弹框wx.showModal();在弹框内再次让用户选择是否授权以及调用权限wx.openSetting();

源码

<template>
  <view>
    <button type="" @click="getLocation">获取位置</button>
    <view>经度:{{x}}</view>
    <view>纬度:{{y}}</view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    getLocation () {
      let that = this
      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
      uni.getSetting({
        success (res) {
          console.log(res)

          // 如果没有授权
          if (!res.authSetting['scope.userLocation']) {
            // 则拉起授权窗口
            uni.authorize({
              scope: 'scope.userLocation',
              success () {
                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                uni.getLocation({
                  type: 'wgs84',
                  success: function (res) {
                    that.x = res.longitude
                    that.y = res.latitude
                    console.log(res)
                    console.log('当前位置的经度:' + res.longitude)
                    console.log('当前位置的纬度:' + res.latitude)
                    uni.showToast({
                      title: '当前位置的经纬度:' + res.longitude + ',' + res.latitude,
                      icon: 'success',
                      mask: true
                    })
                  }, fail (error) {
                    console.log('失败', error)
                  }
                })
              },
              fail (error) {
                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                console.log('拒绝授权', error)

                uni.showModal({
                  title: '提示',
                  content: '若点击不授权,将无法使用位置功能',
                  cancelText: '不授权',
                  cancelColor: '#999',
                  confirmText: '授权',
                  confirmColor: '#f94218',
                  success (res) {
                    console.log(res)
                    if (res.confirm) {
                      // 选择弹框内授权
                      uni.openSetting({
                        success (res) {
                          console.log(res.authSetting)
                        }
                      })
                    } else if (res.cancel) {
                      // 选择弹框内 不授权
                      console.log('用户点击不授权')
                    }
                  }
                })
              }
            })
          } else {
            // 有权限则直接获取
            uni.getLocation({
              type: 'wgs84',
              success: function (res) {
                that.x = res.longitude
                that.y = res.latitude
                console.log(res)
                console.log('当前位置的经度:' + res.longitude)
                console.log('当前位置的纬度:' + res.latitude)
                uni.showToast({
                  title: '当前位置的经纬度:' + res.longitude + ',' + res.latitude,
                  icon: 'success',
                  mask: true
                })
              }, fail (error) {
                uni.showToast({
                  title: '请勿频繁调用!',
                  icon: 'none',
                })
                console.log('失败', error)
              }
            })
          }
        }
      })

    }
  },
}
</script>

<style>
</style>

大佬地址

地址:https://blog.csdn.net/i_am_a_div/article/details/120322835

地址

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!文章来源地址https://www.toymoban.com/news/detail-845898.html

到了这里,关于uni-app微信小程序uni.getLocation获取经度纬度【定位】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • uni-app微信小程序获取手机号授权登录(复制即用,js完成敏感数据对称解密,无需走服务端处理)

    uni-app微信小程序获取手机号授权登录(复制即用,js完成敏感数据对称解密,无需走服务端处理)

    目录 一、示例 二、具体实现说明 获取到的手机号 属性说明 属性名 说明 生效时机 @getphonenumber 获取用户手机号回调 open-type=\\\"getPhoneNumber\\\"  按钮写法 接口说明 接口 说明 wx.login() 获取登录凭证(code),通过凭证进而换取用户登录态信息 auth.code2Session 登录凭证校验 参数说明

    2024年02月10日
    浏览(30)
  • uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)

    uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)

    前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseImage,uni.uploadFile H5上传时它和pc端原理差不多,都是file对象上传,PC端是通过new file对象,uni-app是直接提供了 微信

    2024年02月15日
    浏览(49)
  • 微信小程序uni-app

    微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(46)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(49)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(112)
  • uni-app微信小程序使用echarts

    uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(51)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(48)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(52)
  • uni-app微信小程序如何渲染markdown

    在开发个人网站微信登录平台易登微信小程序的时候,由于说明文档是用markdown格式来书写的,在网页上有各种markdown个人渲染引擎,比如这个markdown编辑器无敌了!。 但是在小程序上还是第一次渲染markdown,找了各种方案,但处处是坑,除此之外最后渲染出来的效果也惨不忍

    2024年02月16日
    浏览(16)
  • uni-app 微信小程序自定义导航栏

    uni-app 微信小程序自定义导航栏

    上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px 1、设置navigationStyle:custom 2、页面导航栏div 3、获取statusBarHeight高度 4、获取navTitleHeight的高度

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包