uniapp开发小程序如何获取用户地理位置

news2024/12/22 18:08:39

1、需求说明

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

2、言归正传

1、编写代码

模板部分

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

script部分

<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>

2、在manifest.json新增如下配置

原因:因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无法正常调用地理位置相关接口;

解决办法: 在manifest.json文件中,mp-weixin属性下配置permission获取地理位置的权限

image-20240122202623007

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

3、运行测试

image-20240122202847753

点击不授权

image-20240122202911445

点击授权,跳转到授权页面,修改为使用时允许

image-20240122202944567

重新获取位置信息

成功获取到用户的地理位置,那么就可以调用后端接口将经纬度存储到服务端使用了

image-20240122203042241

3、结语

1.以上就是今天分享的全部内容,小伙伴们别忘记点赞关注~

2.需要注意的是一定要进行在manifest.json文件中配置,否则会如下错误

image-20240122203542662

3.如果是需要上线的小程序,需要在微信公众平台开发管理->接口设置中开通接口wx.getLocation的权限,否则审核代码时候会不通过

4.制作不易,一键四连再走吧,您的支持永远是我最大的动力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1403537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

hugo的常规使用操作

hugo的常规使用操作&#xff08;不断完善中&#xff09; 找到theme主题中config.toml 一般都会通过theme中复制到自己项目的config.toml中做修改和补充&#xff0c;来完善不同的业务需求 Hugo静态资源载入逻辑 原理 将图片信息放到static中&#xff0c;但是在文章中写的时…

入门教程:使用 Postman 发送 post 请求

Postman 是一个实用的开发工具&#xff0c;它让发送各类 POST 请求成为了可能&#xff0c;包括文本、JSON、XML 以及文件等。开发者利用此工具不仅能够检验API的功能性&#xff0c;还能仿真客户端的请求行为&#xff0c;进而深入了解客户端如何与 API 进行互动。 HTTP 协议中的…

v38.条件结构

1.if-else 2.嵌套if结构 第二个if是嵌套在第一个if里面的&#xff0c;不能独立实现程序。存在依赖关系。 3.else if 不存在依赖关系。 4. printf函数是属于if/else 语句的&#xff0c;加不加大括号&#xff5b;&#xff5d;效果是一样的 5. 也就是说if的管辖范围只能是条件后…

服务器感染了.wis[[Rast@airmail.cc]].wis勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 在当今数字化的时代&#xff0c;恶意软件攻击已经变得越来越复杂和狡猾&#xff0c;[[MyFilewaifu.club]].wis [[backupwaifu.club]].wis[[Rastairmail.cc]].wis勒索病毒是其中的一种新威胁。本文91数据恢复将深入介绍[[MyFilewaifu.club]].wis [[backupwaif…

大数据开发之Spark(入门)

第 1 章&#xff1a;Spark概述 1.1 什么是spark 回顾&#xff1a;hadoop主要解决&#xff0c;海量数据的存储和海量数据的分析计算。 spark是一种基于内存的快速、通用、可扩展的大数据分析计算引擎。 1.2 hadoop与spark历史 hadoop的yarn框架比spark框架诞生的晚&#xff…

常见的嵌入式面试问题解答!

1.关键字static的作用是什么&#xff1f;为什么static变量只初始化一次&#xff1f; ​1&#xff09;修饰局部变量&#xff1a;使得变量变成静态变量&#xff0c;存储在静态区&#xff0c;存储在静态区的数据周期和程序相同&#xff0c; 在main函数开始前初始化&#xff0c;在…

【论文代码】基于隐蔽带宽的汽车控制网路鲁棒认证-到达时间间隔通道的Java实现(一)

文章目录 一、USBtin 基类1.1 CANSender 类1.1.1 SimpleSender类 1.2 CANReceiver类1.2.1 SimpleReceiver类 1.3 Noise_node类 二、CANMessageListener 接口2.1 IAT_Monitor2.2 BasicListener2.3 DLC_Monitor 三、IATBitConverter 抽象类3.1 OneBitConverter类3.2 TwoBitConver…

swagger-ui配置错误原因

第一个问题 就是出现了error white page&#xff0c;主要是因为运行类的pom文件里没有添加到common类的地址dependency&#xff0c;导致出现问题&#xff0c;还到处排查 第二个问题 进去就跳出登录页面&#xff0c;可是我没有账户名和密码啊 在弄pom文件的时候不知道什么时候…

【idea】解决IDEA:The file size exceeds configured limit (5.12MB).

报错原因 The file size (5.13MB) exceeds configured limit (5.12MB). Code insight features are not available.(文件大小超出了设定值&#xff0c;IDEA不再对这个文件的进行代码解析了) 与之而来的结果是&#xff1a;IDEA中其他文件对于这个文件的所有引用都会报错&#x…

洛谷 P1126 机器人搬重物

题目描述 机器人移动学会&#xff08;RMI&#xff09;现在正尝试用机器人搬运物品。机器人的形状是一个直径 1.6 米的球。在试验阶段&#xff0c;机器人被用于在一个储藏室中搬运货物。储藏室是一个 NM 的网格&#xff0c;有些格子为不可移动的障碍。机器人的中心总是在格点上…

云原生DevOps基础与实战

一、DevOps基础 1、DevOps简介 DevOps 是一系列做法和工具&#xff0c;可以使 IT 和软件开发团队之间的流程实现自动化。其中&#xff0c;随着敏捷软件开发日趋流行&#xff0c;持续集成 (CI) 和持续交付 (CD) 已经成为该领域一个理想的解决方案。在 CI/CD 工作流中&#xff…

ARM 驱动 1.22

linux内核等待队列wait_queue_head_t 头文件 include <linux/wait.h> 定义并初始化 wait_queue_head_t r_wait; init_waitqueue_head(&cm_dev->r_wait); wait_queue_head_t 表示等待队列头&#xff0c;等待队列wait时&#xff0c;会导致进程或线程被休眠&…

最新版的Tuxera NTFS 2024 支持macOS 12系统

备受期待的Tuxera NTFS 2024 Mac中文版终于上线了&#xff0c;小编第一时间为您带来&#xff01;Tuxera NTFS 2024 中文版是一款非常好用的NTFS读写工具&#xff0c;可以让您完整的读写兼容NTFS格式驱动器&#xff0c;对磁盘进行访问、编辑、存储和传输文件等。同时还包括开源磁…

电脑存储位置不够怎么办

电脑内存不够怎么办&#xff01;&#xff01;&#xff01; 我前段时间经常因为电脑D盘内存不够而苦恼&#xff08;毕竟电脑内存就那么丁点&#xff0c;C盘作为系统盘不能随便下东西的情况下&#xff0c;就只能选择其他盘进 方法一&#xff1a;检查电脑硬盘的分区情况&#xf…

git内部原理

git内部原理 介绍目录结构说明 介绍 项目的本地仓库中&#xff0c;包含一个隐藏的.git目录&#xff0c;其不同的文件产生都源于git的各种不同命令造成&#xff0c;文件目录如下所示&#xff1a; 目录结构说明 上面最核心重要的为object目录&#xff0c;目录最主要有三个对象…

设置代码模板创建sql映射文件、Mybatis主配置文件

目录 1、Sql映射&#xff08;Sql Mapper&#xff09;文件的介绍 2、Mybatis的主配置文件的介绍 3、通过代码模板创建Sql映射文件 4、通过代码模板创建Mybatis主配置文件 1、Sql映射&#xff08;Sql Mapper&#xff09;文件的介绍 <?xml version"1.0" encod…

AI教我学编程之C#类的基本概念(1)

前言 在AI教我学编程之C#类型 中&#xff0c;我们学习了C#类型的的基础知识&#xff0c;而类正是类型的一种. 目录 区分类和类型 什么是类&#xff1f; 对话AI 追问 实操 追踪属性的使用 AI登场 逐步推进 提出疑问 药不能停 终于实现 探索事件的使用 异步/交互操作 耗时操…

全面分析vcomp140.dll丢失的修复方法,快速解决dll报错问题

vcomp140.dll文件的丢失可能会引发一系列系统运行和软件功能上的问题。作为Microsoft Visual C Redistributable Package的一部分&#xff0c;vcomp140.dll是一个至关重要的动态链接库文件&#xff0c;它的缺失可能导致某些应用程序无法正常启动或执行。具体来说&#xff0c;当…

今年想考CISP的一定要看完❗️

&#x1f3af;国家注册信息安全专业人员&#xff08;英文名称Certified Information Security Professional&#xff0c;简称“CISP"&#xff09;&#xff0c;是由中国信息安全测评中心于2002年推出的、业内公认的国内信息安全领域zqw的gj级认证&#xff0c;是国家对信息安…

【C++】list容器迭代器的模拟实现

list容器内部基本都是链表形式实现&#xff0c;这里的迭代器实现的逻辑需要注意C语言中指针的转换。 list容器如同数据结构中的队列&#xff0c;通常用链式结构进行存储。在这个容器中&#xff0c;我们可以模仿系统的逻辑&#xff0c;在头结点后设置一个“ 哨兵 ”&#xff0c;…