当前位置: 首页 > news >正文

微信小程序一键获取位置

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

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

相关文章:

  • Linux性能优化--使用性能工具发现问题
  • 【Proteus仿真】【STM32单片机】路灯控制系统
  • Flutter笔记:发布一个Flutter头像模块 easy_avatar
  • 标准化助推开源发展丨九州未来参编开源领域4项团体标准正式发布
  • ChatGPT对于留学生论文写作有哪些帮助?
  • 【yolov8目标检测】使用yolov8训练自己的数据集
  • 【vue+nestjs】gitee第三方授权登录【超详细】
  • node 第八天 使用前后端不分离的方式实现cookie登录验证
  • Ubuntu系统如何进行网络连接-连接电脑局域网-物联网开发-Ubuntu系统维护
  • STL库——Vector常见使用接口
  • 将文件(File 对象)分割成多个块
  • 若要对多态类进行深拷贝,应使用虚函数的clone,而不是公开的拷贝构造赋值
  • 同构字符串(C++解法)
  • 『Linux升级路』基本指令
  • python argparse解析参数
  • 【数据挖掘】数据挖掘、关联分析、分类预测、决策树、聚类、类神经网络与罗吉斯回归
  • nodejs+vue 学生宿舍管理系统设计与实现
  • 汽车R155法规包含那些国家?
  • 一个简易的低代码
  • 【JVM系列】- 类加载子系统与加载过程
  • Amazon图片下载器:利用Scrapy库完成图像下载任务
  • Unity中Shader的Pass的复用
  • vue内容自适应方法
  • RustDay05------Exercise[41-50]
  • C语言实现通讯录(超详细)
  • 【Python机器学习】零基础掌握MinCovDet协方差估计
  • 2023年【四川省安全员A证】模拟试题及四川省安全员A证作业模拟考试
  • Flask项目log的集成
  • Open3D(C++) 最小二乘拟合平面(拉格朗日乘子法)
  • c语言练习93:环形链表的约瑟夫问题