微信小程序一键获取位置

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

点击一键获取获取对应位置 显示在  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.mzph.cn/news/110802.shtml

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

相关文章

Stable Diffusion WebUI报错RuntimeError: Torch is not able to use GPU解决办法

新手在安装玩Stable Diffusion WebUI之后会遇到各种问题&#xff0c; 接下来会慢慢和你讲解如何解决这些问题。 在我们打开Stable Diffusion WebUI时会报错如下&#xff1a; RuntimeError: Torch is not able to use GPU&#xff1b;add --skip-torch-cuda-test to COMMANDL…

SQL题目记录

1.商品推荐题目 1.思路&#xff1a; 通过取差集 得出要推荐的商品差集的选取&#xff1a;except直接取差集 或者a left join b on where b null 2.知识点 1.except selectfriendship_info.user1_id as user_id,sku_id fromfriendship_infojoin favor_info on friendship_in…

vue3脚手架搭建

一.安装 vue3.0 脚手架 如果之前安装了2.0的脚手架&#xff0c;要先卸载掉&#xff0c;输入&#xff1a; npm uninstall vue-cli -g 进行全局卸载 1.安装node.js&#xff08;npm&#xff09; node.js&#xff1a;简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是…

【C++笔记】模板进阶

【C笔记】模板进阶 一、非类型模板参数二、类模板的特化三、模板的分离编译 一、非类型模板参数 我们之前学过的模板虽然能很好地帮我们实现泛型编程&#xff0c;比如我们可以让一个栈存储int类型的数据&#xff0c;一个栈存储double类型的数据&#xff1a; template <cla…

【MultiOTP】在Linux上使用MultiOTP进行SSH登录

在前面的文章中【FreeRADIUS】使用FreeRADIUS进行SSH身份验证已经了解过如何通过Radius去来实现SSH和SUDO的登录&#xff0c;在接下来的文章中只是将密码从【LDAP PASSWORD Googlt OTP】改成了【MultiOTP】生成的passcode&#xff0c;不在需要密码&#xff0c;只需要OTP去登录…

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

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

广东广西大量工地建筑支模

近年来&#xff0c;广东广西地区的建筑工地发展迅猛&#xff0c;为满足日益增长的建筑需求&#xff0c;大量工地都需要使用支模模板。支模模板是建筑施工中不可或缺的重要工具&#xff0c;用于搭建楼层、梁柱等结构的模板系统。在广东广西&#xff0c;有许多专业的支模模板厂家…

TCP/IP(二十一)TCP 实战抓包分析(五)TCP 第三次握手 ACK 丢包

一 实验三&#xff1a;TCP 第三次握手 ACK 丢包 第三次握手丢失了,会发生什么? 注意: ACK 报文是不会有重传的,当 ACK 丢失了,就由对方重传对应的报文 ① 实验环境 ② 模拟方式 1、 服务端配置防火墙iptables -t filter -I INPUT -s 172.25.2.157 -p tcp --tcp-flag ACK…

基于Springboot服装商品管理系统免费分享

基于Springboot服装商品管理系统 作者: 公众号(擎云毕业设计指南) 更多毕设项目请关注公众号&#xff0c;获取更多项目资源。如需部署请联系作者 注&#xff1a;禁止使用作者开源项目进行二次售卖&#xff0c;发现必究&#xff01;&#xff01;&#xff01; 运行环境&…

新版pycharm(2023.2.2)修改字体大小

下载了2023新版pycharm&#xff0c;想修改字体&#xff0c;发现找不到之前的setting入口&#xff0c;网上搜索也都是file-setting-editor这些&#xff0c;自己找了找&#xff0c;记录下 2023版pycharm的修改字体大小在file-Manage IDE Settings-Setting Sync… 里面&#xff0…

一篇文章带你弄懂编译和链接

一篇文章带你弄懂编译和链接 文章目录 一篇文章带你弄懂编译和链接一、环境二、翻译环境1.编译①预处理②编译③汇编 2.链接 三、运行环境 一、环境 翻译环境和运行环境 翻译环境&#xff1a;源代码被转换成可执行的机器指令。 运行环境&#xff1a;用于实际执行代码。 二、…

设计模式之抽象工厂模式

前言 工厂模式一般指的是简单工厂模式、工厂方法模式、抽象工厂模式&#xff0c;这是三种工厂模式的最后一篇&#xff0c;其他两种的文章链接如下&#xff1a; 设计模式之简单工厂模式-CSDN博客 设计模式之工厂方法模式-CSDN博客 建议三种模式放在一起对比学习&#xff0c;…

亚马逊测评关于IP和DNS的问题

最近不少人询问了关于IP和DNS的问题&#xff0c;在此进行一些科普。 当客户端试图访问一个网站时&#xff0c;首先会向其所在的ISP的DNS服务器进行查询。如果ISP的DNS服务器没有相关缓存&#xff0c;则会向上级DNS服务器进行查询。 一些诸如CDN之类的服务&#xff0c;可能会为…

云安全—责任共担

0x00 前言 云安全的职责范围实际上一直遵循的是&#xff0c;谁提供谁负责&#xff0c;如果交付给云消费者的时候&#xff0c;交付者使用过程中就要自行负责&#xff0c;也就是我们经常遇到的配置不当等问题&#xff0c;在三层服务模式中&#xff0c;责任互相嵌套&#xff0c;最…

批量修改视频尺寸:简单易用的视频剪辑软件教程

如果你需要批量修改视频尺寸&#xff0c;同时保持高质量的画质&#xff0c;那么“固乔剪辑助手”这款软件是你的不二之选。下面就是如何使用这款软件进行批量修改视频尺寸的详细步骤。 1. 首先&#xff0c;你需要在浏览器中进入“固乔科技”的官网&#xff0c;然后下载并安装“…

大数据 DataX 数据同步数据分析入门

目录 一、DataX 概览 1.1 DataX 是什么 1.2 DataX 3.0 概览 设计理念 当前使用现状 二、DataX 详解 2.1 DataX 3.0 框架设计 2.2 DataX 3.0 插件体系 2.3 DataX 3.0 核心架构 2.3.1 核心模块介绍 2.3.2 DataX 调度流程 2.4 DataX 3.0 的六大核心优势 2.4.1 可靠的…

Linux考试复习整理

文章目录 Linux考试整理一.选择题1.用户的密码现象放置在哪个文件夹&#xff1f;2.删除文件或目录的命令是&#xff1f;3.显示一个文件最后几行的命令是&#xff1f;4.删除一个用户并同时删除用户的主目录5.Linux配置文件一般放在什么目录&#xff1f;6.某文件的组外成员的权限…

科技与时尚共进化,优衣库以硬实力创造品牌长期价值

时尚总是轮回&#xff0c;服装产品如何保持长青&#xff1f;对优衣库来说&#xff0c;产品力不褪色的密码之一&#xff0c;就是始终坚持推动服装科技与时尚融合&#xff0c;赋予生活潮流更多内涵&#xff0c;和更高品质的穿搭体验。 这一点&#xff0c;往往在每年换季新品上市…

2023年【氧化工艺】考试报名及氧化工艺考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 氧化工艺考试报名是安全生产模拟考试一点通总题库中生成的一套氧化工艺考试总结&#xff0c;安全生产模拟考试一点通上氧化工艺作业手机同步练习。2023年【氧化工艺】考试报名及氧化工艺考试总结 1、【单选题】 由和O…

多维时序 | MATLAB实现SSA-CNN-BiGRU-Attention多变量时间序列预测(SE注意力机制)

多维时序 | MATLAB实现SSA-CNN-BiGRU-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09; 目录 多维时序 | MATLAB实现SSA-CNN-BiGRU-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本…