微信小程序如何使用地球半径计算两组经纬度点之间的距离（自身位置与接口返回位置）【上】

目录

1.配置位置权限 

2.获取当前自身经纬度 

3. 请求接口拿到返回经纬

4. 循环取每一项的经纬

5.如何判断是否打开了定位权限 

6.进行距离计算操作 

7.运行效果

8.完整代码

首先在使用小程序时，请求的接口一定要去配置合法域名，才能够进行接下来的操作。 

1.配置位置权限 

在app.json中添加如下代码：

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

2.获取当前自身经纬度 

我们通过wx.getLocation这个api进行获取： 

 wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          currentLatitude: res.latitude,
          currentLongitude: res.longitude
        });
})

在这里我们使用了变量来存放当前经纬度，并且使用that.setData({})方法来赋值，因为this的指向可能不明确，配置如下：

 data: {
      currentLatitude:'',
      currentLongitude:'',
}

  onLoad(options) {
    let that = this;
}

除了gcj02，还有以下几种地理位置坐标系类型可以选择：

  • wgs84：表示使用WGS84坐标系，也是全球卫星定位系统（GPS）所采用的坐标系。
  • bd09：表示使用百度坐标系，在国内常用的一种坐标系，适用于百度地图。
  • bd09ll：表示使用百度经纬度坐标系，与bd09相似，但在经度上更接近真实的经度值。

3. 请求接口拿到返回经纬

wx.request({
          url: '自己所使用的接口',
          method: 'POST',
          data: {},
          success: function(res) {
            console.log(res);
            that.setData({
              list: res.data.data.list
            });
}
})

上述代码呢list是我在data中的一个变量，用来存放我包含经纬度数据的数组，声明方式为list：[]

4. 循环取每一项的经纬

 list数据格式如下： 

 for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
            }
            that.setData({
              list: that.data.list
            });

将item.latitude和item.longitude转换为浮点数（parseFloat()）的目的是将字符串转换为数值型数据。这是因为经纬度通常以字符串的形式存储，在进行距离计算等数值操作时，需要将其转换为数值类型进行计算。通过使用parseFloat()函数，可以将字符串解析成浮点数，以便后续的数值计算。 

5.如何判断是否打开了定位权限 

 在每一次打开此页面的时候都进行一次权限排查，如果没有打开定位权限，则会调起设置打开权限

checkLocationPermission() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
            title: '提示',
            content: '您还没有启用定位权限，是否前往设置开启？',
            success(res) {
              if (res.confirm) {
                // User confirmed opening settings
                wx.openSetting({
                  success(res) {
                    if (res.authSetting['scope.userLocation']) {
                      // User granted location permission in settings
                      that.onLoad(); // Reload the page to fetch data with location permission
                    } else {
                      // User did not grant location permission in settings
                      wx.showToast({
                        title: '您还未开启定位权限',
                        icon: 'none'
                      });
                    }
                  }
                });
              } else if (res.cancel) {
                console.log(res.cancel);
                // User canceled opening settings
                wx.showToast({
                  title: '您还未开启定位权限',
                  icon: 'none'
                });
              }
            }
          });
        }
      }
    });
  },

因为此代码是排查权限信息，所以单独写了个函数，你可以选择在onshow或者onload中调用

  onShow() {
    this.checkLocationPermission();
  },

6.进行距离计算操作 

  getDistance: function(lat1, lon1, lat2, lon2) {
    var R = 6371;
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLon = (lon2 - lon1) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var distance = R * c; 
    return distance.toFixed(2);
  },

详解代码：

  • var R = 6371;：定义地球的半径，单位为公里。这是用于计算两点间距离的基准。

  • var dLat = (lat2 - lat1) * Math.PI / 180;：计算两点纬度差值，并将其转换为弧度值。

  • var dLon = (lon2 - lon1) * Math.PI / 180;：计算两点经度差值，并将其转换为弧度值。

  • var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);：根据Haversine公式，计算两点间的距离。

    • Math.sin(dLat / 2) * Math.sin(dLat / 2)：计算纬度差值的一半的正弦平方。
    • Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180)：计算两点纬度的余弦乘积。
    • Math.sin(dLon / 2) * Math.sin(dLon / 2)：计算经度差值的一半的正弦平方。
    • 将上述三个部分相加得到a的值，表示两点间的角距离。

  • var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));：根据球面三角学公式，计算角距离对应的弧长。

    • Math.sqrt(a)：计算a的平方根。
    • Math.sqrt(1 - a)：计算1 - a的平方根。
    • Math.atan2()：计算给定坐标的反正切值。

  • var distance = R * c;：将弧长乘以地球半径，得到两点间的直线距离，单位为公里。

  • return distance.toFixed(2);：返回计算得到的距离，并将其保留两位小数。

 最后需要调用函数到接口操作中（上述的for循环）：

for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
              let distance = that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);
              item.distance = distance;
            }
            that.setData({
              list: that.data.list
            });

7.运行效果

8.完整代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
      list:[],
      currentLatitude:'',
      currentLongitude:'',
     
  },

  /**
   * 生命周期函数--监听页面加载
   */
  handleImageError(e){
  onLoad(options) {
    let that = this;
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          currentLatitude: res.latitude,
          currentLongitude: res.longitude
        });
        
        wx.request({
          url: '',
          method: 'POST',
          data: {},
          success: function(res) {
            console.log(res);
            that.setData({
              list: res.data.data.list
            });
            
            for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
              let distance = that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);
              item.distance = distance;
            }
            that.setData({
              list: that.data.list
            });
          },
        });
      },
      fail(res) {
        wx.showModal({
          title: '提示',
          content: '您还没有启用定位权限，是否前往设置开启？',
          success(res) {
            if (res.confirm) {
              wx.openSetting({
                success(res) {
                  if (res.authSetting['scope.userLocation']) {
                    that.onLoad(options); 
                  } else {
                    wx.showToast({
                      title: '您还未开启定位权限',
                      icon: 'none'
                    });
                  }
                }
              });
            } else if (res.cancel) {
              console.log(res.cancel);
              wx.showToast({
                title: '您还未开启定位权限',
                icon: 'none'
              });
            }
          }
        });
      }
    });
  },
  
  onShow() {
    this.checkLocationPermission();
  },
  
  checkLocationPermission() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
            title: '提示',
            content: '您还没有启用定位权限，是否前往设置开启？',
            success(res) {
              if (res.confirm) {
                wx.openSetting({
                  success(res) {
                    if (res.authSetting['scope.userLocation']) {
                      that.onLoad(); 
                    } else {
                      wx.showToast({
                        title: '您还未开启定位权限',
                        icon: 'none'
                      });
                    }
                  }
                });
              } else if (res.cancel) {
                console.log(res.cancel);
                wx.showToast({
                  title: '您还未开启定位权限',
                  icon: 'none'
                });
              }
            }
          });
        }
      }
    });
  },
  
  getDistance: function(lat1, lon1, lat2, lon2) {
    var R = 6371; 
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLon = (lon2 - lon1) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var distance = R * c;
    return distance.toFixed(2);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  

  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】
https://blog.csdn.net/m0_71966801/article/details/134084525?spm=1001.2014.3001.5502 

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

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

相关文章

缓存击穿只会逻辑过期 OR 互斥锁？深入思考 == 鹤立鸡群

缓存击穿只会逻辑过期 OR 互斥锁？深入思考 == 鹤立鸡群

网上但凡看得见的文章&#xff0c;大部分在说缓存穿透时都是无脑分布式锁 / 逻辑过期&#xff0c;分布式锁一点问题都没有么&#xff1f;逻辑过期一点问题都没有么&#xff1f;还能不能再进一步优化&#xff1f; 在聊聊缓存击穿的双重判定锁之前&#xff0c;我们将按照循循渐进…
阅读更多...
双十一首日捷报 | 德施曼率先破亿，再度蝉联智能锁品类第一

双十一首日捷报 | 德施曼率先破亿，再度蝉联智能锁品类第一

10月31日晚8:00&#xff0c;各大平台迎来了双十一第一波现货开售。其中&#xff0c;在智能锁类目中德施曼势头最为迅猛&#xff0c;此前&#xff0c;德施曼凭借“全民换锁季”主题活动&#xff0c;在预售期间就已经全面引爆消费者换锁热潮&#xff0c;随着此次现货开售&#xf…
阅读更多...
cut 命令

cut 命令

cut [选项参数] filename #默认分隔符是制表符 选项参数&#xff1a; -d delimiter 分隔符 -f field 场地、领域&#xff08;第几列&#xff09; 命令使用&#xff1a; cut -d " " -f 1 cut.txt #空格为分隔符截取第1列cut -d " " -f 2,3 cut.txt #截…
阅读更多...
百度上传自己个人简介攻略，个人介绍百度百科怎么做？

百度上传自己个人简介攻略，个人介绍百度百科怎么做？

个人介绍要展示在百度百科上该怎么操作&#xff0c;我们都清楚百度百科词条是需要申请才能拥有的&#xff0c;但是没有百度上传自己个人简介的攻略&#xff0c;很多人是不知从何下手的。下面洛希爱做百科网带着大家一起来了解。 一、了解百度百科词条的创建规则 1. 词条名称规…
阅读更多...
jdk官网下载(详细步骤)

jdk官网下载(详细步骤)

jdk全部版本下载网址 Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/ 下载之前先建立oracle账号(免费创建)&#xff0c;不用特意去搜&#xff0c;你点击下载jdk的时候会自动弹出来&#xff0c;自己建立一个账号就能下载了 找到自己要下载…
阅读更多...
【产品体验】OA办公系统

【产品体验】OA办公系统

一、演示地址 http://admin.dianshixinxi.com:90/index 二、办公管理功能 1.我的待办&#xff1a;当前登录用户&#xff0c;办理任务 2.通知公告&#xff1a;通知与公告&#xff0c;已发布通知公告会显示在首页 3.自定义表单&#xff1a;自定义表单&#xff0c;托拉拽的形式…
阅读更多...
iZotope RX 10(音频修复和增强工具)

iZotope RX 10(音频修复和增强工具)

iZotope RX 10是一款音频修复和增强软件&#xff0c;主要特点包括&#xff1a; 声音修复&#xff1a;iZotope RX 10可以去除不良噪音、杂音、吱吱声等&#xff0c;使音频变得更加清晰干净。音频增强&#xff1a;iZotope RX 10支持对音频进行音量调节、均衡器、压缩器、限制器等…
阅读更多...
IDEA 使用技巧

IDEA 使用技巧

文章目录 语言支持简化编写 有问题&#xff0c;可暂时跳过 个人常用快捷键插件主题插件功能插件 碰到过的问题 除了一些在Linux上用vim开发的大佬&#xff0c;idea算是很友好的集成开发工具了&#xff0c;功能全面&#xff0c;使用也很广泛。 记录一下我的 IDEA 使用技巧&#…
阅读更多...
解密人工智能：KNN | K-均值 | 降维算法 | 梯度Boosting算法 | AdaBoosting算法

解密人工智能：KNN | K-均值 | 降维算法 | 梯度Boosting算法 | AdaBoosting算法

文章目录 一、机器学习算法简介1.1 机器学习算法包含的两个步骤1.2 机器学习算法的分类 二、KNN三、K-均值四、降维算法五、梯度Boosting算法和AdaBoosting算法六、结语 一、机器学习算法简介 机器学习算法是一种基于数据和经验的算法&#xff0c;通过对大量数据的学习和分析&…
阅读更多...
虹科示波器 | 汽车免拆检修 | 2013款大众途观车发动机加速无力

虹科示波器 | 汽车免拆检修 | 2013款大众途观车发动机加速无力

一、故障现象 一辆2013款大众途观车&#xff0c;搭载CGM发动机&#xff0c;累计行驶里程约为12.6万km。车主进厂反映&#xff0c;发动机加速无力。 二、故障诊断 接车后试车&#xff0c;发动机怠速运转正常&#xff1b;原地将加速踏板踩到底&#xff0c;发动机转速最高只能达到…
阅读更多...
AQS面试题总结

AQS面试题总结

一&#xff1a;线程等待唤醒的实现方法 二&#xff1a; 介绍一下LockSupport 三&#xff1a;AQS是什么 AQS使用一个volatile的int类型的成员变量来表示同步状态&#xff0c;通过内置的FIFO队列完成资源获取排队工作&#xff0c;将每条要去抢占资源的线程封装成一个NODE节点来…
阅读更多...
抛开八股——实际业务下如何设计缓存与数据库一致性解决方案

抛开八股——实际业务下如何设计缓存与数据库一致性解决方案

前言 对于缓存与数据库一致性的八股文也是老生常谈了&#xff0c;但是所谓没有最好的方案&#xff0c;只有最合适的方案&#xff0c;如果我们一味的去硬啃八股文&#xff0c;很容易就丧失了对于业务的基本分析能力&#xff0c;更别说针对业务来设计出合理合适的解决方案&#x…
阅读更多...
Flutter笔记：完全基于Flutter绘图技术绘制一个精美的Dash图标（下）

Flutter笔记：完全基于Flutter绘图技术绘制一个精美的Dash图标（下）

Flutter笔记 完全基于Flutter绘图技术绘制一个精美的Dart吉祥物Dash 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/arti…
阅读更多...
2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 A题 海上丝绸之路发展战略的影响 原题再现 一带一路不是实体或机制&#xff0c;而是合作与发展的理念和主张。凭借现有有效的区域合作平台&#xff0c;依托中国与有关国家现有的双边和多边机制&#xff0c;利用古丝绸之路的历史象征&#xff0…
阅读更多...
如何看待将本增效？

如何看待将本增效？

如何看待将本增效&#xff1f; 么是降本增效&#xff1f;就是公司里&#xff0c;增进收益的动作要多做&#xff0c;无效的动作要少做&#xff0c;甚至不做。什么叫有效&#xff1f;回到公司的经营目标上去&#xff0c;企业的管理就是目标管理。降本&#xff0c;需要卓越运营&a…
阅读更多...
reese84

reese84

网址:https://beta.makeabooking.flyscoot.com/ 这个基本上会在航空网站上出现&#xff0c;国内的我也没见过&#xff0c;然后这个是我很早很早之前的老友分享的&#xff0c;然后昨天花时间去看了一下&#xff0c;之前经常听其他大佬说&#xff0c;但是我也出来没遇见过。 感觉…
阅读更多...
损坏的视频不能观看，还能修复吗？

损坏的视频不能观看，还能修复吗？

3-1 在日常的生活或者工作中&#xff0c;特别是做摄像工作的人&#xff0c;有一定的概率会遇到损坏的视频文件&#xff0c;比如相机突然断电、无人机炸机等&#xff0c;都有可能导致保存的视频文件损坏。 如果遇到这种情况&#xff0c;该如何修复这种损坏的视频文件&#xff…
阅读更多...
Java入门必刷的基础题1（八道）

Java入门必刷的基础题1（八道）

目录 1. 第一题 2. 判定一个数字是否是素数 3. 打印 1 - 100 之间所有的素数 4. 输出 1000 - 2000 之间所有的闰年 5. 输出乘法口诀表 6. 求两个正整数的最大公约数 7. 求二进制中 1 的个数 8.分别输出二进制中的奇数位和偶数位 下面的源码大多只有方法体&#xff0c;需…
阅读更多...
k8s资源对象--pod

k8s资源对象--pod

创建pod: kubectl get pod cp test_pod_1.yaml nginx_pod.yaml cah 查看详细信息&#xff1a; pod的状态处于pending可能的原因&#xff1a;一个或多个没有运行 由于当前所有节点没有可用节点&#xff08;所有节点资源不足&#xff0c;所有节点&#xff09; 查看所有&…
阅读更多...
免费好用的DNS在线工具，DNS记录、域名被墙、Whois轻松查询

免费好用的DNS在线工具，DNS记录、域名被墙、Whois轻松查询

在互联网的世界中&#xff0c;DNS是一种非常重要的存在&#xff0c;它们是域名与IP地址之间的桥梁&#xff0c;用于实现用户访问网站。我们在搭建网站时&#xff0c;经常会用到一些DNS工具&#xff0c;以便了解网站的DSN情况。DNS记录查询工具、域名被墙检测工具以及Whois域名信…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站