2023超级详细微信小程序纯前台获取当前具体位置,地图上选点进行位置签到 计算签到距离

前言:

为了解决不同板块获取位置以及取代三级联动的问题,当前进行研究微信小程序获取当前具体位置。

思路:

调用微信小程序中获取当前地理位置的方法,与设置地理位置的方法,通过、、、实现当前距离设置打卡地点的距离,如果自定义的距离小于等于设置的距离,且签到时间在有效的范围中,则签到成功,并且签到只能是一次。这里获取到当前时间地点,将签到的信息保存到数据库中

技术难点:

一,解决通过getLocation获取的是IP地址--->不精准

二,将当前地理位置的经纬度与定义地理位置的经纬度的差距转换为距离的m

步骤:

1.获取当前地理位置的经纬度

方法一:

  //地理位置
  getLocation(){
    wx.getLocation({
      isHighAccuracy: true,
      success: (res) =>{
        console.log('纬度' + res.latitude)
        console.log('经度' + res.longitude)
      }
     })
    console.log("调用地理位置")
  },

缺点:不精准,获取的是大概的位置

如果想要精准就要依据第三方的接口来:这里我使用腾讯地图指定SDK获取地址

下面需要注册腾讯地图的key

一,在腾讯地图注册

腾讯位置服务 - 立足生态,连接未来 (qq.com)icon-default.png?t=N7T8https://lbs.qq.com/二,在开发指南-->入门-->开发文档-->微信小程序SDK

三,申请到key

  1. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

  2. 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com(可以不设置,但会有一个安全提示)

 现在完成后,启动我们的微信小程序开发软件,新建一个项目。在libs文件夹中导入小程序的SDK。

getCurrentLocal.js

const QQMapWX = require('../../libs/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    current_location:'',
    flag: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this 
    that.getCurrentLocal()
  },

  // 获取当前地理位置 授权验证
  getCurrentLocal(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权,则打开设置页面
          wx.openSetting({
            success(res) {}
          })
        }  else { // 第一次授权,或者已授权,直接调用相关api
          that.getMyLocation()
        }
      }
    })
  },
  //获取当前地理位置
  getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {  
        console.log('location',"res"+ res);
        var locationString = res.latitude + "," + res.longitude;
        wx.request({
          url: 'https://apis.map.qq.com/ws/coord/v1/translate?',
          data: {
            locations:locationString,
            type:1,
            key:'IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6'
          },
          method: 'GET',
          success: function (request) {
            console.log(request);
            var locationString_new = request.data.locations[0].lat + "," + request.data.locations[0].lng;
            wx.request({
              url: 'http://apis.map.qq.com/ws/geocoder/v1/',
              data: {
                "key": "IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6",
                "location": locationString_new
              },
              method: 'GET',
              success: function (r) {
                console.log(r);
                //输出一下位置信息
                console.log('当前位置',
                r.data.result.formatted_addresses.recommend,
                r.data.result.location.lat,
                r.data.result.location.lng)
                var current_location = r.data.result.formatted_addresses.recommend;
                var lat = r.data.result.location.lat;//当前的纬度
                var lng = r.data.result.location.lat;//当前的经度
                that.setData({
                  current_location: current_location,
                  flag: true
                })
                //这步是将位置信息保存到本地缓存中,key = value的形式
                try {
                  wx.setStorageSync('locationInfo', r.data.result.formatted_addresses.recommend)
                } catch (e) {
                  console.log(e)
                }
              }
            });

          }
        });
      }
    })
  }
	
})

2.地理位置的经纬度的差距转换为距离的m

我们通过设置的距离与我们当前的距离进行对比,进行转换

2.1方法第一步:将经纬度转换为弧度rad

将以上获取经纬度信息的方法进行一下修改,获取经纬度信息后,将获取到的经纬度信息与目标信息作为参数传入getDistance()方法

rad (d) {
    return d * Math.PI / 180.0;
  },
//进行计算
 getDistance(lat1, lng1, lat2, lng2) {
    var radLat1 = this.rad(lat1);
    var radLat2 = this.rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.rad(lng1) - this.rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000; //输出为公里

    var distance = s;
    var distance_str = "";

    if (parseInt(distance) >= 1) {
      distance_str = distance.toFixed(1) + "km";
    } else {
      distance_str = distance * 1000 + "m";
    }
    //s=s.toFixed(4);

    console.info('距离是', s);
    console.info('距离是', distance_str);
    return s;
  },

3.配置云数据库

云数据库具有许多优势,包括:

  1. 灵活性和易用性:云数据库提供了简化的管理界面和工具,使得数据库的设置、配置和管理变得更加简单和方便。同时,它还支持各种编程语言和开发框架,使得开发人员可以更轻松地集成和使用数据库。

  2. 成本效益:云数据库采用按需付费模型,可以根据实际使用情况支付费用,避免了传统数据库购买和维护的高成本。此外,云数据库还可以通过资源共享和优化来提高资源利用率,从而降低总体成本。

这里我们首次使用云数据库会有1个月的免费试用

4.设置打卡

对比签到地与目的地是否少于100m

5.应用场景:

会议OA的签到功能,商场项目的收货地址的取代三级联动,以及许多使用位置的功能都可以用得上。

效果:

总结:

 对于多频次的相同请求,可通过缓存结果,并定时访问更新的方式,减少对在线服务调用的依赖;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python数据结构与算法-02_数组和列表

线性结构 本节我们从最简单和常用的线性结构开始,并结合 Python 语言本身内置的数据结构和其底层实现方式来讲解。 虽然本质上数据结构的思想是语言无关的,但是了解 Python 的实现方式有助于你避免一些坑。 我们会在代码中注释出操作的时间复杂度。 数…

【Python基础】文件传输协议

🌈欢迎来到Python专栏 🙋🏾‍♀️作者介绍:前PLA队员 目前是一名普通本科大三的软件工程专业学生 🌏IP坐标:湖北武汉 🍉 目前技术栈:C/C、Linux系统编程、计算机网络、数据结构、Mys…

PyCharm鼠标控制字体缩放

File->Settings->Keymap 右边搜索栏输入increase(放大),可以看到下面出现increase Font Size(放大字体尺寸),双击。 双击后出现几个选项,选择Add Mouse Shortcut,会出现一个页面给录入动作。 按住Ctrl同时鼠标向上滚动,该动…

时间序列预测实战(十六)PyTorch实现GRU-FCN模型长期预测并可视化结果

往期回顾:时间序列预测专栏——包含上百种时间序列模型带你从入门到精通时间序列预测 一、本文介绍 本文讲解的实战内容是GRU-FCN(门控循环单元-全卷积网络),这是一种结合了GRU(用于处理时间序列数据)和FCN(全卷积网络…

Java项目开发:基于Springboot+vue口腔牙科诊所管理系统

项目介绍 本选题则旨在通过标签分类管理等方式,实现管理员:首页、个人中心、会员管理、病例就诊信息管理、牙齿保健产品管理、复查提醒管理、预约挂号管理、药品信息管理、留言板管理、系统管理、订单管理,会员;首页、个人中心、…

Git企业开发级讲解(二)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、添加⽂件--场景⼀1、操作2、演示 二、查看 .git ⽂件1、tree .git命令2、内容讲解3、总结…

nginx 无法 停止

一、nginx正常停止命令 进入到nginx目录,然后执行 # 立即停止 nginx -s stop # 平滑停止 nginx -s quit 二、 如果你不小心启动了多次nginx.exe 那么通过任务管理器可以停止 三、如果 任务管理器无法停止 那么就在cmd命令中执行 netstat -ano //查看所以端口…

立体库堆垛机控制程序手动功能实现

手动操作功能模块 手动前后保护锁 *************提升手动程序段 手动上升,下降保护锁 **********货叉手动程序段

Vue 小黑记事本组件版

渲染功能: 1.提供数据: 提供在公共的父组件 App.vue 2.通过父传子,将数据传递给TodoMain 3.利用 v-for渲染 添加功能: 1.收集表单数据 v-model 2.监听事件(回车点击都要添加) 3.子传父,讲…

Shopee买家通系统之注册虾皮买家号大概需要多少成本

想要注册大量的虾皮买家号,可以使用shopee买家通系统进行注册,这款软件可以全自动化的注册虾皮买家号,不过想要自动化更方便,对于账号资料有一定的要求。 1、现在注册虾皮买家号基本上都是需要用手机号注册了的,而虾皮…

escape, encodeURI, encodeURIComponent 有什么区别以及作用?

目录 前言 全部内容 1. 注释 2. 写法 3. 代码 4. 事件 5. 总结 6. 理论 7. 用法 8. 结论 9. API 10. 优缺点 escape: encodeURI: encodeURIComponent: 11. 方法 总结 🙂博主:冰海恋雨. 🙂文章核心:escape, encod…

千兆路由只有200M,原来是模式选择不对,也找到了内网不能通过动态域名访问内部服务的原因

本来1000M的宽带接入的,但是一测试发现只有200M,把电信叼了过来, 一测试发现宽带没问题,网线正常,网卡正常,只有可能是路由器的问题了,尴尬了,赶紧给满意好评放他走。回头好好研究一…

nvm工具解决nodejs版本切换问题

常见版本问题 npm启动vite项目报错,信息如下 npm run dev> my-vue-app0.0.0 dev D:\data\code\document-assistant-web > vitefile:///D:/data/code/document-assistant-web/node_modules/vite/bin/vite.js:7await import(source-map-support).then((r) >…

16岁还是街头餐厅“洗碗妹”,46岁已成美国“三院士”,华人科学家李飞飞的美国之路

昨天群里大V分享了一本书《The Worlds I See》,我迫不及待的下载阅读了。 16岁,她还是美国街头餐厅的“洗碗妹”。 46岁,她已成为美国三大权威科学院院士、斯坦福教授、当代科技领军人物榜上,与乔布斯齐名的人物。 她就是华裔女科…

一张图搞懂什么是BCD8421编码

如图所示 BCD8421编码的意义是 用四位二进制数表达一位的十进制数 因此十进制下的0~9在BCD8421编码下与其二进制表达是一样的 而多位的十进制数 比如说“10” 则需要将它拆分成两个单独的数“1”和“0” 分别用BCD8421编码表示这两个数 十进制“1” -> 0001 十进…

CTFhub-RCE-远程包含

给咱一个phpinfo那么必然有他的道理 PHP的配置选项allow_url_include为ON的话,则include/require函数可以加载远程文件,这种漏洞被称为"远程文件包含漏洞(Remote File Inclusion RFI)"。 allow_url_fopen On 是否允许打开远程文件 allow_u…

合众汽车选用风河Wind River Linux系统

导读合众新能源汽车股份有限公司近日选择了Wind River Linux 用于开发合众智能安全汽车平台。 合众智能安全汽车平台(Hozon Automo-tive Intelligent Security Vehicle Plat-form)是一个面向高性能服务网关及车辆控制调度的硬件与软件框架,将于2024年中开始投入量产…

传奇手游天花板赤月【盛世遮天】【可做底版】服务端+自主授权+详细教程

搭建资源下载地址:传奇手游天花板赤月【盛世遮天】【可做底版】服务端自主授权详细教程-海盗空间

智能巡检软件哪个好?中小企业如何提升工作效率与质量?

在当今数字化、智能化的时代,智能巡检软件作为一种高效的工具,已经在各行各业得到了广泛的应用。它利用物联网、大数据、人工智能等技术,为巡检工作提供了全面的解决方案,帮助企业实现数据化、智能化管理,提高工作效率…

Power Automate-条件判断和通知操作

在模板中搜索推送通知,选择获取有关重要电子邮件的推送通知 点击创建,再去编辑 该操作的逻辑是收件箱里收到重要性为高的电子邮件时进行下一步 可以更改邮件的重要性选择,点击下拉框重新选择即可 还可以在此步骤下再创建新操作,选…