vue:如何通过两个点的经纬度进行距离的计算(很简单)

首先假设从api获取到了自己的纬经度和别人的纬经度

首先有一个概念需要说一下

地球半径

由于地球不是一个完美的球体,所以并不能用一个特别准确的值来表示地球的实际半径,不过由于地球的形状很接近球体,用[6357km] 到 [6378km]的范围值可以涵盖需要的所有半径。并且通常情况下,地球半径有几个常用值:

极半径,从地球中心至南极或北极的距离, 相当于6356.7523km; 赤道半径,从地球中心到赤道的距离,大约6378.137km; 平均半径,6371.393km,表示地球中心到地球表面所有各点距离的平均值; RE,地球半径,有时被使用作为距离单位, 特别是在天文学和地质学中常用,大概距离是6370.856km;

所以我们通过地球半径进行计算的时候,通常情况下,我们可以使用上面的每一个值都可以进行计算,不过或多或少都会有误差的,但这样的误差是也是允许存在的。最后通过let f = e.toFixed(2)保留距离的两位小数

通过生命周期函数mouted获取当前两个位置的距离

运行结果

这样就可以完成通过经纬度进行距离的计算了是不是很简单实用,直接复制粘贴方法调用就可以使用了。

方法:

calculateDistance(lat1, lon1, lat2, lon2) { //计算两点之间的距离console.log('lat1, lon1, lat2, lon2', lat1, lon1, lat2, lon2)let R = 6371; //地球半径let dLat = this.deg2rad(lat2 - lat1)let dLon = this.deg2rad(lon2 - lon1)let a =Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *Math.sin(dLon / 2) * Math.sin(dLon / 2);let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));let d = R * c; // 距离,单位:千米  let e = parseFloat(d)let f = e.toFixed(2)return f;},deg2rad(deg) {return deg * (Math.PI / 180)},

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

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

相关文章

基于小程序实现的餐饮外卖系统

作者主页:Java码库 主营内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】:Java 【框架】:spring…

2024年管理科学、电子商务与应用国际会议(ICMSECA2024)

2024年管理科学、电子商务与应用国际会议(ICMSECA2024) 会议简介 2024年管理科学、电子商务和应用国际会议(ICMSCA2024)旨在为来自世界各地的研究专家建立一个国际论坛,展示他们在知识管理系统领域的想法和经验,同时为世界各地的…

在Visual Studio配置C++的netCDF库的方法

本文介绍在Windows电脑的Visual Studio软件中,配置C 语言最新版netCDF库的方法。 netCDF(Network Common Data Form)是一种用于存储、访问和共享科学数据的文件格式和库,其提供了一种灵活的方式来组织、描述和存储多维数据&#…

接口测试——postman

一.下载与安装 https://www.getPostman.com/ 界面导航说明 二.get请求 第一个get请求 批量执行接口请求: 1. 右击run collection 2. 会出现runner标签页 携带参数的GET请求 所谓的查询参数,其实就是URL地址中问号(?)后面的部分…

Docker应用推荐个人服务器实用有趣的项目推荐

Wallabag:是一个开源的、自托管的文章阅读和保存工具。它允许你保存网页文章并进行离线阅读,去除广告和不必要的内容,以提供更好的阅读体验。Wallabag支持多种导入和导出格式,并提供了一些实用的功能,如标签、阅读列表…

定制k8s域名解析------CoreDns配置实验

定制k8s域名解析------CoreDns配置实验 1. 需求 k8s集群内通过CoreDns互相解析service名. 同时pana.cn域为外部dns解析,需要通过指定dns服务器进行解析 再有3个服务器,需要使用A记录进行解析 2. K8s外DNS服务器 查看解析文件 tail -3 /var/named/pana.cn.zone 解析内容 ww…

go限流、计数器固定窗口算法/计数器滑动窗口算法

go限流、计数器固定窗口算法/计数器滑动窗口算法 一、问题 问题1:后端接口只能支撑每10秒1w个请求,要怎么来保护它呢? 问题2:发短信的接口,不超过100次/时,1000次/24小时,要怎么实现&#xff…

websocket定时推送数据

示例代码 1、添加pom.xml依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId> </dependency> 2、创建websocket配置类 package com.success.socket; import org.springframework.conte…

社交创新的标杆:解读Facebook的社交模式

引言 在当今数字化时代&#xff0c;社交媒体已成为人们日常生活和沟通的重要工具。作为全球最大的社交媒体平台&#xff0c;Facebook不仅改变了我们的社交模式&#xff0c;而且对全球的社交文化、商业活动和公共事务产生了深远的影响。本文将深入探讨Facebook的社交模式&#…

C++算法题 - 矩阵

目录 36. 有效的数独54. 螺旋矩阵48. 旋转图像73. 矩阵置零289. 生命游戏 36. 有效的数独 LeetCode_link 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现…

yolo组件之BottleneckCSP总结

1. 功能解释 Bottleneck CSP&#xff08;Cross Stage Partial&#xff09;是一种常用于计算机视觉任务的卷积神经网络&#xff08;CNN&#xff09;中的瓶颈层类型。它是传统瓶颈层&#xff08;如ResNet中常见的Bottleneck&#xff0c;关于Bottleneck介绍请参考文章yolo组件之Bo…

优斯特:防静电包装解决方案的巧妙运用

在现代电子产品生产与运输领域&#xff0c;防静电包装已成为保障产品安全的必备环节。优斯特凭借其创新的防静电包装解决方案&#xff0c;为客户提供了一种巧妙的方式来确保产品在存储和运输过程中不受静电影响&#xff0c;并且不会被刮花或损坏。 静电对产品的影响 静电对电子…