如何在 JavaScript 中查找到已知位置的距离

2024-03-02

在浏览器中使用 JavaScript,如何确定从我当前位置到另一个我有纬度和经度的位置的距离?


如果您的代码在浏览器中运行,您可以使用 HTML5 地理定位 API:

window.navigator.geolocation.getCurrentPosition(function(pos) { 
  console.log(pos); 
  var lat = pos.coords.latitude;
  var lon = pos.coords.longitude;
})

一旦您知道当前位置和“目标”的位置,您就可以按照本问题中记录的方式计算它们之间的距离:计算两个经纬度点之间的距离? (半正矢公式) https://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points.

所以完整的脚本变成:

function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
  var dLon = (lon2-lon1).toRad(); 
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
          Math.sin(dLon/2) * Math.sin(dLon/2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

window.navigator.geolocation.getCurrentPosition(function(pos) {
  console.log(pos); 
  console.log(
    distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
  ); 
});

显然我现在距离马萨诸塞州波士顿市中心 6643 米(这是硬编码的第二个位置)。

请参阅这些链接以获取更多信息:

  • http://html5demos.com/geo http://html5demos.com/geo
  • http://diveintohtml5.info/geolocation.html http://diveintohtml5.info/geolocation.html
  • 计算两个经纬度点之间的距离? (半正矢公式) https://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
  • toRad() Javascript 函数抛出错误 https://stackoverflow.com/questions/5260423/torad-javascript-function-throwing-error
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中查找到已知位置的距离 的相关文章

随机推荐

  • Rails 应用程序在 Heroku 上找不到 fontawesome 图标

    我安装了一个引导主题 一切在本地运行良好 但是 当我推送到 heroku 时 我的应用程序找不到字体 我预编译了资产并推送到heroku 但没有图标 因此 我在development rb中使用以下内容创建了像heroku这样的开发环境 c
  • 如何获取程序集 dll 的处理器架构? [复制]

    这个问题在这里已经有答案了 我可以通过在 C 中以编程方式加载 dll 来获取处理器架构吗 有没有一个类可以做到这一点 我需要了解 dll 是否是 x86 x64 MSIL 等 假设您只查看 net 程序集 您可以使用CorFlags ex
  • 如何查看 Fabric Composer 的日志

    我想查看 Fabric Composer 生成的运行时和客户端日志 但找不到它们 您能否提供有关如何访问日志的指导 运行时日志 如果你跑docker ps a您应该看到 3 个正在运行的 docker 容器 Docker 容器之一将是链码容
  • 如何将 rspec 与 before_validation 一起使用

    我无法理解如何正确使用 before validation 回调与 Rspec 模型 类别 rb class Category lt ActiveRecord Base validates presence of name permalin
  • CXF - com.ctc.wstx.exc.WstxUnexpectedCharException:非法字符((CTRL-CHAR,代码 5))

    我在互联网上发现问题是soap请求包含unicode char for ctrl v 这是Xml中的非法字符 我不知道它是如何进入String的 但我想简单地在服务器端删除它 有人可以告诉我如何解决这个问题吗 我找到了这个片段 XMLOut
  • Java 关闭连接和 findbugs

    在我们的代码中 我们通常使用以下模式 Connection conn try conn getConnection Do databasey stuff catch Exceptions that get thrown finally tr
  • 如何在内核模块代码中添加poll函数?

    据我所知 要从内核空间通知用户空间 一种方法是使用 poll 这意味着内核驱动程序应该首先提供 poll 方法 下面的代码是从网上找到的 确实有效 include
  • Codeigniter:下拉验证 set_rules

    我可以知道如何确保用户选择了 Dr Mr Ms Mdm 当他们提交表单时 如果称呼为空白 它将返回 set rules 的错误消息 Code echo p Salutation salutationOptions array gt Dr g
  • 全局变量sencha touch 2.1

    您好 我需要定义一个全局变量以在我的应用程序的任何位置使用 我声明了一个全局变量baseUrl in my app js 请看下面 应用程序 js
  • HTML5,div,隐藏,点击显示

    我有一个 div 末尾有一个按钮 我希望当有人按下该按钮时 另一个 div 前一个 div 下方 应该出现 其中包含我将其放入 div 内的内容 我正在使用以下代码 HTML div a href REGISTER a div br br
  • 具有两个或多个当前值的 Delphi 进度条

    我想在我的软件中制作一种多色条 一种进度条 但有两个当前值 这就是我需要它的原因 我有一些 预算部分 每个部分都有自己的限制 100 美元 1000 美元等 我还有一个用于添加新账单 并将账单链接到预算部分 的编辑表单 在这个编辑器中 我想
  • Hibernate 在 ManyToOne 关系中处理长 0 值而不是 NULL

    我使用 Hibernate 来访问旧数据库 对于某些表 不强制执行父子引用完整性 并且long对于子表中的某些 父 列 使用 0 值代替 NULL 以表示 无父 我仍然想使用这些关系 ManyToOne and OneToMany字段 但得
  • 无法通过 RIA 服务访问 EntityObject 类型

    我的实体框架模型是从 SQL Server 数据库生成的 由于我需要从 Silverlight 访问数据库 因此我根据 EF 模型为 RIAServices 生成了一个 DomainService Product是自动生成的之一Entity
  • 一次对多个属性使用“转换为自动属性”

    我发现自己经常使用 Resharper 的 转换为自动属性 重构来删除 C 3 0 之前的样板代码 有什么方法可以将其应用到单个类中的所有属性立刻 ReSharper 可以做到这一点 Options gt Code Cleanup gt U
  • Pygame:display.update() 在时钟延迟后才会更新

    我正在使用 pygametime Clock以较低的 FPS 运行我的游戏 我注意到我的输入似乎需要额外一帧才能生效 我做了一些调试 发现这不是问题pygame event get 而是与pygame display update 我编写了
  • DynamoDBScanExpression withLimit 返回的记录多于限制

    必须列出 DynamoDB 表中的所有记录 无需任何过滤表达式 我想限制记录数量 因此将 DynamoDBScanExpression 与 setLimit 结合使用 DynamoDBScanExpression scanExpressio
  • 在 Visual Studio 2012 中以编程方式指定专用扩展库

    VS 2012 的最新功能之一是能够创建私人延伸画廊 http blogs msdn com b visualstudio archive 2011 10 03 private extension galleries for the ent
  • 异步管道不会将对象数据填充到模板中

    谁能帮我看看我的模板中是否存在语法错误 它不会给出错误 但也不会将数据填充到模板中 div h2 hero h2 h2 hero name details h2 div div div
  • 将额外参数传递给 C# 回调

    如何向以下回调添加额外参数 objXmpp OnLogin new ObjectHandler objXmppArun OnLogin private void objXmppArun OnLogin object sender 是否可以向
  • 如何在 JavaScript 中查找到已知位置的距离

    在浏览器中使用 JavaScript 如何确定从我当前位置到另一个我有纬度和经度的位置的距离 如果您的代码在浏览器中运行 您可以使用 HTML5 地理定位 API window navigator geolocation getCurren