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

一、 前言

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

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

  3. 应用哈弗辛公式

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

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

二、 代码注释及参数详解

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

有毒,解读后食用

javascript 复制代码
/**
 * @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 = true) {
window.location.replace("https://juejin.cn/user/84036866547575/columns")
  // 将角度转换为弧度
  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;
}

三、使用实例

scss 复制代码
// 示例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"
相关推荐
保持学习ing40 分钟前
帝可得 - 设备管理
javascript·vue.js·elementui
从零开始学习人工智能1 小时前
FastMCP:构建 MCP 服务器和客户端的高效 Python 框架
服务器·前端·网络
烛阴1 小时前
自动化测试、前后端mock数据量产利器:Chance.js深度教程
前端·javascript·后端
好好学习O(∩_∩)O1 小时前
QT6引入QMediaPlaylist类
前端·c++·ffmpeg·前端框架
敲代码的小吉米1 小时前
前端HTML contenteditable 属性使用指南
前端·html
testleaf2 小时前
React知识点梳理
前端·react.js·typescript
站在风口的猪11082 小时前
《前端面试题:HTML5、CSS3、ES6新特性》
前端·css3·html5
Xiao_die8882 小时前
前端八股之CSS
前端·css
每天都有好果汁吃2 小时前
基于 react-use 的 useIdle:业务场景下的用户空闲检测解决方案
前端·javascript·react.js
穗余2 小时前
NodeJS全栈开发面试题讲解——P10微服务架构(Node.js + 多服务协作)
前端·面试·node.js