<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+HTML5实例

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

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

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

  7. 《Entity Framework 6 Recipes》中文翻译系列 (45) ------ 第八章 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. Java面试必备知识2

    1 .三个Statment区别,用法 Statement,基本的:PreparedStatement是可编译的,提高效率,callablestatement,存储过程 2 .Cookie 答:临时co ...

  2. NeHe OpenGL教程 第四十三课：FreeType库

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. python（13）线程池：threading

    先上代码: pool = threadpool.ThreadPool(10) #建立线程池,控制线程数量为10 reqs = threadpool.makeRequests(get_title, da ...

  4. 斑马打印机网卡ZebraNet配置（有线）

    实图: 抽象图: 说明: 1.并口,用于连接斑马打印机一端 2.网络连接状态指示灯 3.打印状态指示灯 4.测试按钮,在连接打印机的情况下,按下此键,会打印出网卡信息. 5.网线接口 按下测试按钮之后 ...

  5. Double-checked locking and the Singleton pattern--双重检查加锁失效原因剖析

    以下内容摘取自http://stackoverflow.com/questions/11195389/out-of-order-writes-for-double-checked-locking Th ...

  6. js 事件函数中的参数带换行符或换行标签都不能起作用的解决方法

    把问题参数值赋给标签的属性data-value,通过属性值获取参数值.

  7. MySQL优化技巧之四（数据库设计中的一些技巧）

    1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...

  8. Python标准库——走马观花

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python有一套很有用的标准库(standard library).标准库会随着 ...

  9. iOS设计模式反思之单例模式的进化

    什么是单例模式? 单例模式想一个大独裁者,他规定在他的国度里面,所有数据的访问和请求都得经过他,甚至你要调用相关的函数也得经过它.学术一点就是,单例模式,为某一类 需求和数据提供了统一的程序接口.主要 ...

  10. log4net 日志写入MongoDB 实现分布式日志

    本人在.net framework 4.5下测试成功,首先需要安装log4mongo-net组件,见https://www.nuget.org/packages/log4mongo-net/ vs20 ...