微信小程序一键获取位置

news2025/1/19 20:21:03

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

点击一键获取获取对应位置 显示在  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的API
                    that.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.latitude
      const longitude = res.longitude
      wx.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.coloradmin.cn/o/1107187.html

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

相关文章

Excel·VBA单元格区域数据对比差异标记颜色

之前的一篇博客《ExcelVBA单元格重复值标记颜色》&#xff0c;是对重复的整行标记颜色 而本文是按行对比2个单元格区域的数据&#xff0c;并对有差异的区域&#xff08;一个单元格区域有的&#xff0c;而另一个单元格区域没有的&#xff09;标记颜色&#xff0c;且只要存在任意…

杨辉三角按列求和

假设求杨辉三角这一列 我们考虑这个格子&#xff1a; 然后对其不断展开 综上&#xff1a; ∑ i 0 n ( i k ) ( n 1 k 1 ) \sum_{i0}^n\binom i k\binom {n1}{k1} i0∑n​(ki​)(k1n1​) ∑ i l r ( i k ) ( r 1 k 1 ) − ( l k 1 ) \sum_{il}^r\binom i k\binom{r1}{k…

Kafka存取原理与实现分析,打破面试难关

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 系列文章目录一、主题与分区1. 模型…

每日一博 - Code如何被发布到生产环境

文章目录 概述Flow 概述 关于公司如何将代码发布到生产环境的是一个什么样的流程呢&#xff1f; 下面的图示展示了典型的工作流程。 步骤 1&#xff1a;流程始于产品负责人根据需求创建用户故事。步骤 2&#xff1a;开发团队从积压工作中挑选用户故事&#xff0c;将它们放入…

Flutter——最详细(CustomScrollView)使用教程

CustomScrollView简介 创建一个 [ScrollView]&#xff0c;该视图使用薄片创建自定义滚动效果。 [SliverList]&#xff0c;这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]&#xff0c;这是一种更高效的薄片&#xff0c;它显示沿滚动轴具有相同范围的子级的线性列…

pycharm操作git

pycharm操作git 之前用命令做的所有操作&#xff0c;使用pychrm点点就可以完成 克隆代码 上方工具栏Git ⇢ \dashrightarrow ⇢ Clone ⇢ \dashrightarrow ⇢ 填写地址&#xff08;http、ssh&#xff09; 提交到暂存区&#xff0c;提交到版本库&#xff0c;推送到远程 直接…

IOday7

A进程 #include <head.h> int main(int argc, const char *argv[]) {pid_t cpidfork();if(cpid>0)//父进程向管道文件2写{ int wfd;if((wfdopen("./myfifo2",O_WRONLY))-1){ERR_MSG("open");return -1;} char buf[128]"";while(1){bze…

ps或游戏提示d3dcompiler_47.dll缺失怎么修复?常见的修复方法总结

在当今这个信息化的时代&#xff0c;计算机已经成为我们生活和工作中不可或缺的一部分。然而&#xff0c;随着软件的不断更新和升级&#xff0c;一些技术问题也时常困扰着我们。其中&#xff0c;d3dcompiler_47.dll缺失就是一个常见的问题。本文将详细介绍五种修复方案&#xf…

CART(classification and regression tree)

基尼指数 在分类问题中&#xff0c;假设有K个类&#xff0c;样本点属于第k类的概率为pk&#xff0c;则概率分布的基尼指数定义为 Gini指数越小表示集合的纯度越高&#xff0c;反之&#xff0c;集合越不纯 CART CART分类树默认使用基尼指数选择最优特征 常见数构建算法&#…

从零实现FFmpeg6.0+ SDL2播放器

FFmpeg6.0开发环境搭建播放器代码框架分析解复用模块开发实现包队列和帧队列设计音视频解码线程实现SDL2音频声音输出SDL2视频画面渲染-YUV显示音视频同步-基于音频 地址: https://xxetb.xet.tech/s/3NWJGf

Django项目配置

1 项目准备 1.1 创建test数据库&#xff0c;并导入数据&#xff0c;生成对应的表 登录数据库create database test;use test;导入数据创建表:source D:/Demo.sql; 1.2 安装Django及驱动程序: 安装django&#xff1a; pip install Django3.2.22 安装好后可使用命令&#xf…

家中种绿植有什么风水讲究?

现在越来越多的人&#xff0c;都居住在小区高楼里&#xff0c;与绿植的接触也越来越少&#xff0c; 因此&#xff0c;很多人会选择在自己家中种上几株绿植。在家里种植植物&#xff0c;不仅美观&#xff0c;陶冶情操&#xff0c;还能净化空气&#xff0c;为家中增添好的风水。 …

论文阅读:Efficient Point Cloud Segmentation with Geometry-Aware Sparse Networks

来源&#xff1a;ECCV2022 链接&#xff1a;Efficient Point Cloud Segmentation with Geometry-Aware Sparse Networks | SpringerLink 0、Abstract 在点云学习中&#xff0c;稀疏性和几何性是两个核心特性。近年来&#xff0c;为了提高点云语义分割的性能&#xff0c;人们提…

数据结构--B树

目录 回顾二叉查找树 如何保证查找效率 B树的定义 提炼 B树的插入和删除 概括B树的插入方法如下 B树的删除 导致删除时&#xff0c;结点不满足关键字的个数范围时&#xff08;需要借&#xff09; 如果兄弟不够借&#xff0c;需要合体 回顾B树的删除 B树 B树的查找 …

python二次开发Solidworks:圆+样条曲线草图

以下代码实现在Solidworks中构建草图&#xff0c;在草图中绘制了一个圆和一根样条曲线&#xff0c;并实现全约束。 import numpy as np import win32com.client as win32 import pythoncom def vtPoint(x, y, z):# 坐标点转化为浮点数return win32.VARIANT(pythoncom.VT_ARRAY…

分享《泰坦陨落2》缺少msvcr120.dll的解决方法,亲测有效的5个修复方法

自我接触《泰坦陨落2》这款游戏以来&#xff0c;我深深地被它精彩的战斗场景、丰富的剧情设定以及独特的角色设计所吸引。然而&#xff0c;在一次游戏过程中&#xff0c;我遭遇了一个前所未有的问题——缺少msvcr120.dll文件&#xff0c;导致游戏无法正常运行。 一、缺少msvcr1…

【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性

JavaScript 是前端开发中不可或缺的一部分&#xff0c;它为我们提供了丰富的工具和技术&#xff0c;以便更好地操作和交互HTML页面。在本文中&#xff0c;我们将重点介绍JavaScript中的 innerHTML 属性&#xff0c;它是DOM&#xff08;文档对象模型&#xff09;的一部分&#x…

python实现截图识别文字(已打包成exe程序)

目录 1、简介 2、如何使用 3、完整代码 4、免费下载⭐⭐ 在这里给大家安利一个自己开发的截图识别文字的程序&#xff01; 程序使用的前提&#xff0c;是电脑本机装了Python环境&#xff01;(版本不限) 1、简介 这段代码创建了一个屏幕截图工具的GUI应用程序&#xff0c;允…

雷达基础导论及MATLAB仿真

文章目录 前言一、雷达基础导论二、Matlab 仿真1、SNR 相对检测距离的仿真①、Matlab 源码②、仿真1&#xff09;、不同 RCS&#xff0c;SNR 相对检测距离仿真2&#xff09;、不同雷达峰值功率&#xff0c;SNR 相对检测距离仿真 2、脉冲宽度相对所要求的 SNR 仿真①、Matlab 源…

【字符串匹配算法】KMP、哈希

STL O(mn) C中提供子串查询的函数可以使用std::string类的相关方法来实现。 find函数&#xff1a;可以查找一个子串在原字符串中的第一个出现位置。它返回子串的起始索引&#xff0c;如果找不到则返回std::string::npos。substr函数&#xff1a;可以提取原字符串中的一个子串…