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"
相关推荐
慧慧吖@5 分钟前
前端发送请求时,参数的传递格式
前端
L李什么李7 分钟前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务24 分钟前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
linuxxx11026 分钟前
ajax() 回调函数参数详解
前端·ajax·okhttp
王嘉俊92526 分钟前
ThinkPHP 入门:快速构建 PHP Web 应用的强大框架
开发语言·前端·后端·php·框架·thinkphp
我有一棵树1 小时前
html 滚动条相关开发经验总结
前端·javascript·html
正义的大古1 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
Z_Wonderful1 小时前
ReactUse 与ahook对比
前端·javascript·react.js
guoyp21261 小时前
前端实验(序)——前端开发基础
前端
_Legend_King1 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui