当前位置:首页 > JavaScript

js实现测距

2026-03-15 10:16:23JavaScript

使用Geolocation API获取位置坐标

通过浏览器内置的Geolocation API可以获取用户设备的经纬度坐标。需要用户授权位置权限后,调用navigator.geolocation.getCurrentPosition()方法:

js实现测距

navigator.geolocation.getCurrentPosition(
  (position) => {
    const lat1 = position.coords.latitude;
    const lon1 = position.coords.longitude;
    console.log(`当前位置: ${lat1}, ${lon1}`);
  },
  (error) => {
    console.error("获取位置失败:", error.message);
  }
);

计算两点间距离(Haversine公式)

已知两个点的经纬度坐标$(lat1, lon1)$和$(lat2, lon2)$,使用Haversine公式计算球面距离:

js实现测距

function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // 地球半径(km)
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * 
    Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c; // 返回公里数
}

实现完整测距流程

结合位置获取和距离计算,实现完整测距功能:

// 目标点坐标(示例:纽约市)
const targetLat = 40.7128;
const targetLon = -74.0060;

navigator.geolocation.getCurrentPosition(
  (position) => {
    const distance = calculateDistance(
      position.coords.latitude,
      position.coords.longitude,
      targetLat,
      targetLon
    );
    console.log(`距离目标点: ${distance.toFixed(2)}公里`);
  },
  (error) => {
    console.error("定位错误:", error.message);
  }
);

注意事项

Geolocation API仅在HTTPS环境或localhost下可用,部分浏览器可能需要用户明确授权。移动设备通常比桌面设备定位更精确。

计算结果为直线距离,实际路径距离可能更长。对于高精度需求场景,建议使用专业地图API(如Google Maps Distance Matrix API)。

标签: js
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 // 方…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…