当前位置:首页 > 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实现

实现 JavaScript 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let co…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

jquery.js

jquery.js

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