<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. Educational Codeforces Round 15 Cellular Network

    Cellular Network 题意: 给n个城市,m个加油站,要让m个加油站都覆盖n个城市,求最小的加油范围r是多少. 题解: 枚举每个城市,二分查找最近的加油站,每次更新答案即可,注意二分的时候 ...

  2. [复变函数]第06堂课 2.1 解析函数的概念与 Cauchy-Riemann 方程 (续)

    2. 解析函数及其简单性质 (1) 定义: a. 若 $w=f(z)$ 在区域 $D$ 内可微, 则称 $f$ 在 $D$ 内解析; b. 若 $w=f(z)$ 在 $z_0$ 处的某邻域内解析, 则 ...

  3. Studio-----快捷键大全

    Ctrl+Alt+Space 类名或接口名提示; 补充布局的提示: 26. Ctrl+Alt+Space是类名自动完成 Ctrl+X 删除行 Ctrl+D 复制行 Alt+回车 导入包,自动修正 Cr ...

  4. C#2

    同名的两个类如果在不同的命名空间中,相互之间是不会混淆的. 一个名为TextHello的命名空间中创建一个名为Program的类,引用方法 TextHello.Program 我们常用的Console ...

  5. java多线程之生存者与消费者(Java编程思想)

    1.通过wait() 与 Notify实现 package Produce; import java.util.concurrent.ExecutorService; import java.util ...

  6. Eclipse中Build Workspace 优化

    在开发中,发现eclipse 的 Build Workspace 很慢很慢,只要是由于验证js, css, xml 等等静态的文件导致. 我遇到的问题是,项目中有一个js文件很大,怎么都不能Build ...

  7. oracle游标循环的嵌套

    完成批量修改user_tables中的所有表的栏位名(从MS SQL导入过来,发现大小写问题,造成很多麻烦) 存储过程见下: -- Created on 2012/3/14 by FREE decla ...

  8. Java基础-布局

  9. SQL Server 2005中的分区表（五）：添加一个分区(转)

    所谓天下大事,分久必合,合久必分,对于分区表而言也一样.前面我们介绍过如何删除(合并)分区表中的一个分区,下面我们介绍一下如何为分区表添加一个分区. 为分区表添加一个分区,这种情况是时常会 发生的.比 ...

  10. C++学习47 文件的概念 文件流类与文件流对象 文件的打开与关闭

    迄今为止,我们讨论的输入输出是以系统指定的标准设备(输入设备为键盘,输出设备为显示器)为对象的.在实际应用中,常以磁盘文件作为对象.即从磁盘文件读取数据,将数据输出到磁盘文件.磁盘是计算机的外部存储器 ...