微信小程序一键获取位置

需求 有个表单需要一键获取对应位置 并显示出来效果如下:

点击一键获取获取对应位置 显示在  picker 默认选中

前端  代码如下:

     <view class="box_7  {{ showChange==1? 'change-style':'' }}"><view class="box_11"><view class="text-wrapper_6 {{ showChange==1? 'change-style-postiona':'' }}"><text lines="1" class="text_29">考试地址</text><text lines="1" class="text_30" /><text lines="1" class="text_31">*</text></view><picker class="region-select" mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">{{region[0]}}   {{region[1]}}     {{region[2]}}</view></picker><button  bindtap="getUserLocation" class="get-position {{ showChange==1? 'change-style-postion':''}}">一键获取</button></view></view>

一定注意:小程序中要配置,不然获取位置不生效。

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

小程序js如下:注意 获取到 经纬度之后 请求腾讯 api key 要进行申请 ,申请很快

申请地址 腾讯位置服务 - 立足生态,连接未来

getUserLocation: function () {let that = this;wx.getSetting({success: (res) => {if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {//如果没有授权就提示需要授权wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,调用wx.getLocation的APIthat.getLocations();} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {that.getLocations();}else {that.getLocations();}}})
},
//获取经纬度getLocations()
{let that = this;wx.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.request({url: 'https://apis.map.qq.com/ws/geocoder/v1/',data: {location: `${latitude},${longitude}`,key: that.data.key,get_poi: 0},success(res) {if(res.statusCode==200){const addressComponent = res.data.result.address_component;const province = addressComponent.province;const city = addressComponent.city;const district = addressComponent.district;var showChange =0;if((province+city+district).length>=12){showChange =1;}var result = [province, city, district];that.setData({region: result,showChange: showChange,addressSelect:1,})}else{wx.showToast({title: '定位获取失败,请手动选择~',icon: 'none'})}}})}})
},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大鼠药代动力学(PK参数/ADME)+毒性 实验结果分析

在真实做实验的时候&#xff0c;出现了下面真实测试的一些参数&#xff0c;一起学习一下&#xff1a; 大鼠药代动力学&#xff1a; 为了进一步了解化合物 96 的药代动力学性质&#xff0c;我们选择化合物 500 进行 SD大鼠药代动力学评估。 经静脉注射和口服给药后观察大鼠血药…

互联网行业汇总

互联网行业汇总&#xff0c;全网最全&#xff01;选行业不愁 从事互联网选什么行业&#xff1f;这似乎是很多朋友的困惑。 所以这里给大家把互联网行业做个细致的汇总&#xff0c;每个行业列举几个典型的APP&#xff0c;简单拆解下各自的盈利模式&#xff0c;希望能给大家提供参…

【力扣1528】重新排列字符串

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析1、Java代码2、C代码 一、题目描述 给你一个字符串 s 和一个长度相同的整数数组 indices。 请你…

Linux块设备缓存Bcache使用

1 Bcache简介 Bcache是Linux内核块层cache&#xff0c;它使用SSD来作为HDD硬盘的cache&#xff0c;从而起到加速作用。Bcache内核模块仅在Linux 3.10及以上版本支持&#xff0c;因此使用Bcache&#xff0c;需要将内核升级到3.10及以上版本&#xff0c;并在内核配置项中打开Bca…

【学习笔记】RabbitMQ04:延迟队列的原理以及实现代码

参考资料 RabbitMQ官方网站RabbitMQ官方文档噼咔噼咔-动力节点教程 文章目录 七、延迟队列7.1 什么是延迟队列7.2 延迟队列的解决方案7.2.1 定时任务7.2.2 **被动取消**7.2.3 JDK的延迟队列7.2.3 采用消息中间件&#xff08;rabbitMQ7.2.3.1 适用专门优化后的死信队列实现延迟队…

攻防世界web篇-unserialize3

得出php代码残篇 将代码补全后再在线php运行工具中进行运行 在浏览器输入后得到下面的界面 这里需要将O:4:“xctf”:1:{s:4:“flag”;s:3:“111”;} 改为 O:4:“xctf”:2:{s:4:“flag”;s:3:“111”;}

单片机入门后该怎么学习进一步提升?

单片机入门后该怎么学习进一步提升&#xff1f; 可以将你目前会的单片机基础先整理一下&#xff0c;你看看运用这些基本的外设或者一些入门知识能做个什么东西&#xff0c;最近很多小伙伴找我&#xff0c;说想要一些单片机资料&#xff0c;然后我根据自己从业十年经验&#xff…

查询企业信息的四种方法

在工作中或者对于找工作的求职人来说&#xff0c;怎么查看企业的信息呢&#xff1f;可能很多人会想到各种查查类软件&#xff0c;但是这类软件需要会员或者付费才能查看&#xff0c;对于没有会员的人来说&#xff0c;有没有其他查询企业的方法呢&#xff1f;答案肯定是有的&…

Python 爬虫实战之爬淘宝商品并做数据分析

前言 是这样的&#xff0c;之前接了一个金主的单子&#xff0c;他想在淘宝开个小鱼零食的网店&#xff0c;想对目前这个市场上的商品做一些分析&#xff0c;本来手动去做统计和分析也是可以的&#xff0c;这些信息都是对外展示的&#xff0c;只是手动比较麻烦&#xff0c;所以…

IDC:到2027年,全球生成式AI支出将达到1430亿美元

全球著名信息调查咨询机构IDC在官网公布了一项调查&#xff0c;到2027年&#xff0c;全球生成式AI&#xff08;Generative AI&#xff0c;简称Gen AI&#xff09;支出将达到1430亿美元&#xff0c;5年复合年增长率为73.3%。 该支出包括&#xff1a;生成式AI的软件以及相关基础…

报错:AttributeError: module ‘tensorflow‘ has no attribute ‘flags‘

改成如下&#xff1a; 报错原因&#xff1a;tensorflow1.x与2.x版本问题不兼容

3D Web轻量化工具HOOPS Web Platform助力Rapid DCS快速上市碳估算产品!

总部位于英国的Rapid DCS提供全面的交钥匙解决方案和服务&#xff0c;帮助建筑环境领域的客户充分利用数字化的优势。 Rapid DCS技术总监James Hunter表示&#xff1a;“如今的建筑项目需要一套与20甚至10年前的建筑项目不同的功能。” “例如&#xff0c;虽然成本规划一直很重…

性能监控软件是什么?有哪些优势?

在现代科技驱动的世界中&#xff0c;计算机系统的性能对于企业和个人用户都至关重要。性能监控软件是一种不可或缺的工具&#xff0c;可以帮助我们实时跟踪、分析和优化系统的性能。本文将介绍性能监控软件的概念、其重要性以及如何选择和使用这些工具来提高系统效率。 一、性能…

【微服务 SpringCloud】实用篇 · Eureka注册中心

微服务&#xff08;3&#xff09; 文章目录 微服务&#xff08;3&#xff09;1. Eureka的结构和作用2. 搭建eureka-server2.1 创建eureka-server服务2.2 引入eureka依赖2.3 编写启动类2.4 编写配置文件2.5 启动服务 3. 服务注册1&#xff09;引入依赖2&#xff09;配置文件3&am…

如何让你的Node.js应用程序处理数百万的API请求

目录 一、了解 Node.JS 和 API 请求 二、优化 NodeJS 以实现高性能 1.使用异步操作 2.实现缓存 3.优化数据库查询 4.负载平衡 5.水平扩展 三、测试和监控性能 1.负载测试 2.应用程序性能监控(APM) 四、结论 一、了解 Node.JS 和 API 请求 在我们深入研究这些技术之…

29栈与队列——优先队列

目录 LeetCode之路——347. 前 K 个高频元素 分析 优先队列 简单示例 运行结果 源码简析 LeetCode之路——347. 前 K 个高频元素 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: num…

Java基础(三)

1. 异常 Java 异常类层次结构图概览&#xff1a; 1.1 Exception 和 Error 有什么区别&#xff1f; 在 Java 中&#xff0c;所有的异常都有一个共同的祖先 java.lang 包中的 Throwable 类。Throwable 类有两个重要的子类: Exception :程序本身可以处理的异常&#xff0c;可以…

uniapp 小程序实现图片宽度100%、高度自适应的效果

因为image组件默认是有宽度跟高度的&#xff0c;所以这个高度不怎么好写 通过load事件来控制图片的高度 话不多说&#xff0c;直接上代码&#xff0c; <image class"img" src"/static/image.png" :style"{ height: imgHeight px }"mode&q…

Linux-ssh

文章目录 远程登录服务器配置远程服务器相关信息创建config文件配置config文件 配置密钥登陆先创建密钥配置密钥文件 执行命令scp传文件copy文件copy文件夹配置我们的vim和tmux 远程登录服务器 ssh userhostnameuser:用户名hostname&#xff1a;IP地址或域名 第一次登陆会显示…

SI基础知识:说一说玻纤布规格(如1078)的具体含义,以及等效Dk计算

玻纤布的编织包含经向和纬向两个不同的方向&#xff0c;这些玻璃布并没有被紧密放置在一起&#xff0c;在玻纤布上会有开窗&#xff0c;而且经向开窗和纬向开窗大小不同。 IPC定义了每种玻纤布的编织密度以及所用玻璃丝的规格&#xff0c;如下图所示。 看上面的表格&#xff0c…