HTML5-新API-geolocation-实例-距离跟踪器

时间：2022-09-10 20:48:29
 <body onLoad="loadDemo()">

     <header>

         <h1>oldmeter演示</h1>

         <h4>距离跟踪器</h4>

     </header>

     <section>

          <article>

              <header>

                 <h1>你的位置</h1>

                 <p class="info" id="status">地理位置是不是在你的浏览器支持。</p>

                 <div class="geostatus">

                     <p id="latitude">纬度:</p>

                     <p id="longitude">经度:</p>

                     <p id="accuracy">精度:</p>

                     <p id="altitude">海拔：</p>

                     <p id="altitudeAccuracy">海拔精度：</p>

                     <p id="heading">行进方向、相对于正北：</p>

                     <p id="speed">速度(m/s):</p>

                     <p id="timestamp">时间戳:</p>

                     <p id="currDist">目前距离旅行：</p>

                     <p id="totalDist">总距离：</p>

                  </div>

             </header>

          </article>

     </section>

     <footer>

         <h2>使用HTML5，和你的脚！</h2>

     </footer>

     <script type="text/javascript">

         var totalDistance=0.0;

         var lastLat;

         var lastLong;

         Number.prototype.toRadians=function(){

             return this * Math.PI/;

             }

         function distance(latitude1,longitude1,latitude2,longitude2){

             var R=;//R是地球半径，单位是km

             var deltalatitude=(latitude2-latitude1).toRadians();

             var deltaLongitude=(longitude2-longitude1).toRadians();

             latitude1=latitude1.toRadians();

             latitude2=latitude2.toRadians();

             var a=Math.sin(deltalatitude/) *

                   Math.sin(deltalatitude/) +

                   Math.cos(latitude1) *

                   Math.cos(latitude2) *

                   Math.sin(deltaLongitude/) *

                   Math.sin(deltaLongitude/);

             var c=*Math.atan2(Math.sqrt(a),Math.sqrt(-a));

             var d=R*c;

             return d;

         }

         function updateErrorStatus(message){

             document.getElementById("status").style.background="papayaWhip";

             document.getElementById("status").innerHTML="<strong>Error</strong>:"+message;

         }

         function updateStatus(message){

             document.getElementById("status").style.background="paleGreen";

             document.getElementById("status").innerHTML=message;

         }

         function loadDemo(){

             //检查浏览器是否支持geolocation

             if(navigator.geolocation){

                 document.getElementById("status").innerHTML="在你的浏览器支持HTML5 Geolocation";

                 navigator.geolocation.watchPosition(updateLocation,handleLocationError,{timeout:});

             }

         }

         function updateLocation(position){

             var latitude=position.coords.latitude;//纬度

             var longitude=position.coords.longitude;//经度

             var accuracy=position.coords.accuracy;//精度(准确度）单位米

             var altitude=position.coords.altitude;//海拔

             var altitudeAccuracy=position.coords.altitudeAccuracy;//海拔精度 单位米

             var heading=position.coords.heading;//行进方向、相对于正北

             var speed=position.coords.speed;//速度m/s

             var timestamp=position.timestamp;//时间戳

             document.getElementById("latitude").innerHTML="北纬度："+latitude;

             document.getElementById("longitude").innerHTML="东经度："+longitude;

             document.getElementById("accuracy").innerHTML="精度："+accuracy+"米";

             document.getElementById("altitude").innerHTML="海拔："+altitude+"米";

             document.getElementById("altitudeAccuracy").innerHTML="海拔精度："+altitudeAccuracy;

             document.getElementById("heading").innerHTML="行进方向："+heading;

             document.getElementById("speed").innerHTML="速度："+speed+"米";

             document.getElementById("timestamp").innerHTML="时间戳："+timestamp;

             //合理性检查...如果accuracy的值太大就不要计算距离了

             if(accuracy>=){

                 updateStatus("需要更精确的值来计算距离");

                 return;

             }

             if((lastLat !=null)&&(lastLong !=null)){

                 var currentDistance =distance(latitude,longitude,lastLat,lastLong);

                 document.getElementById("currDist").innerHTML="目前距离旅行"+currentDistance.toFixed()+"km";

                 totalDistance +=currentDistance;

                 document.getElementById("totalDist").innerHTML="总距离"+currentDistance.toFixed()+"km";

                 updateStatus("位置成功更新。");

                 lastLong=longitude;

             }

         }

         //错误处理

         function handleLocationError(error){

             switch(error.code){

                 case :

                     updateErrorStatus("有一个错误在获取你的位置:错误信息"+error.message);

                 break;

                 case :

                     updateErrorStatus("用户选择不分享他或她的位置。");

                 break;

                 case :

                     updateErrorStatus("浏览器无法确定自己的位置,错误信息"+error.message);

                 break;

                 case :

                     updateErrorStatus("在检索位置之前，浏览器超时。");

                 break;

             }

         }

     </script>

 </body>

HTML5-新API-geolocation-实例-距离跟踪器的更多相关文章

  1. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

  2. 用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...

  3. 【转】odoo 新API装饰器中one、model、multi的区别

    http://blog.csdn.net/qq_18863573/article/details/51114893 1.one装饰器详解 odoo新API中定义方式: date=fields.Date ...

  4. HTML5新特性之移动设备API

    为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API. 1.Geolocation API Geolocation接口用于获取用户的地理位置.它使用的方法基于GPS或者其他机制(比如I ...

  5. HTML5新特性之CSS&plus;HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  6. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 &lpar;45&rpar; ------ 第八章 POCO之获取原始对象与手工同步对象图和变化跟踪器

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-6  获取原始对象 问题 你正在使用POCO,想从数据库获取原始对象. 解决方案 ...

  8. HTML5新特性及详解

    什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...

  9. 通过新的 Azure 媒体服务资源管理器工具管理媒体工作流

    Xavier Pouyat    Azure 媒体服务高级项目经理 几个月前,一家广播公司找到了我,希望我向他们提供一种图形界面工具,好让他们使用 Azure媒体服务来上传.管理资产并对资产进行编 ...

随机推荐

  1. php查看网页源代码的方法

    这篇文章主要介绍了php查看网页源代码的方法,涉及php读取网页文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了php查看网页源代码的方法.分享给大家供大家参考.具体实现 ...

  2. &lbrack;Tomcat&rsqb; Tomcat远程调试

    如何用eclispe远程调试tomcat 关键步骤: 1)修改启动脚本startup.bat 复制startup.bat为startup-debug.bat,然后打开startup-debug.bat ...

  3. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

  4. UVa1592 数据库（摘）

    输入一个n行m列的数据库(1<=n<=10000,1<=m<=10),是否存在两个不同行r1,r2和两个不同列c1,c2,使得这两行和这两行相同(即(r1,c1)和(r2,c1 ...

  5. mina学习资料整合

    最好的资料当然是官方文档:https://mina.apache.org/mina-project/userguide/user-guide-toc.html 官方文档,配合源码中的example例子 ...

  6. （原创）看我用各种姿势在手机和PC查看到连接到的wifi密码

    今天一个女神来我家做客,她问我WiFi密码,然而我却奇迹般的忘记了(特么的当时心里一万个*踏过去),让我在她面前尴尬求子的,所以为了防止你们也出现这种情况,我特地把各种方法整理了一下,那么感兴趣的 ...

  7. C&num; 委托高级应用----线程——创建无阻塞的异步调用&lpar;二&rpar;

    了解IAsyncResult 现在我们已经了解,EndInvoke可以给我们提供传出参数与更新后的ref参数:也可以向我们导出异步函数中的异常信息.例如,我们使用BeginInvoke调用了异步函数S ...

  8. CABaRet&colon; Leveraging Recommendation Systems for Mobile Edge Caching

    CABaRet:利用推荐系统进行移动边缘缓存 本文为SIGCOMM 2018 Workshop (Mobile Edge Communications, MECOMM)论文. 笔者翻译了该论文.由于时 ...

  9. pd&period;concat&lpar;&rpar;命令

    这个生成dataframe函数还是蛮有意思的.

  10. BNUOJ 34982 Beautiful Garden

    BNUOJ 34982 Beautiful Garden 题目地址:BNUOJ 34982 题意:  看错题意纠结了好久... 在坐标轴上有一些树,如今要又一次排列这些树,使得相邻的树之间间距相等.  ...

相关文章