JS如何实现测距功能

JavaScript实现测距功能主要分为地理测距和非地理测距两类，核心是通过获取坐标数据并应用数学模型计算距离。

地理测距需考虑地球曲率，远距离时勾股定理误差显著，必须使用Haversine公式计算大圆距离。

• 公式原理：Haversine公式通过经纬度计算球面上两点间的最短路径（大圆距离），假设地球为完美球体（平均半径6371公里）。

• 实现步骤：

  定义地球半径：const R = 6371;（单位：公里）。

  经纬度转弧度：const dLat = (lat2 - lat1) * Math.PI / 180;const dLon = (lon2 - lon1) * Math.PI / 180;

  代入公式计算：const a = Math.sin(dLat / 2) 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) 2;const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = R * c;

  完整代码示例：function calculateDistance(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) 2; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c;}// 示例：北京到上海const dist = calculateDistance(39.9042, 116.4074, 31.2304, 121.4737);console.log(`距离：${dist.toFixed(2)}公里`); // 输出：1067.59公里

• 注意事项：

  地球实际为椭球体，Haversine结果为近似值，但精度足够满足大多数Web应用需求。

  需处理经纬度单位转换（度→弧度），避免三角函数计算错误。

通过navigator.geolocation API获取用户经纬度，需处理权限和错误。

• 核心方法：

  getCurrentPosition()：异步获取一次性位置。

  watchPosition()：持续监听位置变化（如运动APP）。

• 代码示例：

  if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const { latitude, longitude } = position.coords; console.log(`位置：纬度${latitude}, 经度${longitude}`); }, (error) => { switch (error.code) { case error.PERMISSION_DENIED: console.error("用户拒绝权限"); break; case error.POSITION_UNAVAILABLE: console.error("位置不可用"); break; case error.TIMEOUT: console.error("获取超时"); break; } }, { enableHighAccuracy: true, timeout: 5000 } );} else { console.error("浏览器不支持地理位置API");}

• 安全限制：

  仅在HTTPS环境下可用。

  用户必须明确授权，否则无法获取位置。

在二维画布上，两点间距离可用勾股定理计算。

• 实现代码：function calculatePixelDistance(p1, p2) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; return Math.sqrt(dx 2 + dy 2);}// 示例const point1 = { x: 10, y: 20 };const point2 = { x: 50, y: 60 };console.log(`像素距离：${calculatePixelDistance(point1, point2).toFixed(2)}`); // 输出：56.57像素

通过getBoundingClientRect()获取元素位置信息，计算元素间距离或判断重叠。

• 典型应用：

  判断元素是否在视口内。

  计算两个元素的水平/垂直间距。

• 代码示例：

  const element1 = document.getElementById("box1");const element2 = document.getElementById("box2");const rect1 = element1.getBoundingClientRect();const rect2 = element2.getBoundingClientRect();const horizontalDist = Math.abs(rect2.left - rect1.left);const verticalDist = Math.abs(rect2.top - rect1.top);

• 地理测距：必须使用Haversine公式，适用于城市、国家等远距离计算。
• 非地理测距：

  Canvas绘图：勾股定理计算像素距离。

  DOM布局：getBoundingClientRect()判断元素位置关系。

• 核心逻辑：获取准确坐标数据，选择适配场景的数学模型（球面/平面），最终服务于地图、绘图或布局等实际需求。