<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. solr环境搭建

    介绍摘自百度百科:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  2. Form_Form Builder国际化多语言开发（案例）

    2014-05-06 Created By BaoXinjian

  3. Python中HTTPS连接

    permike 原文 Python中HTTPS连接 今天写代码时碰到一个问题,花了几个小时的时间google, 首先需要安装openssl,更新到最新版本后,在浏览器里看是否可访问,如果是可以的,所以 ...

  4. git（4）如何在windows上安装git

    windows版本git(1.9.2)下载:点击下载 下完之后点击双击安装: 我安装的是默认的目录:一路next,最后就安装完成了,中间步骤中也有unix下安装的选项: 我的安装目录是在:C:\Pro ...

  5. iis7设置404页面不生效的原因

    打开web.config <httpErrors errorMode="Custom" existingResponse="PassThrough"> ...

  6. heredoc和nowdoc的区别

    heredoc使用 <<< EOT 的标示符,而nowdoc使用 <<< 'EOT' 这样的标示符,其中nowdoc是PHP5.3引进的新技术,它包含了heredo ...

  7. centos update git（转载）

    From:http://itekblog.com/update-git-centos/ 1.下载RPMForge repo cd /tmp # bit: wget http://pkgs.repofo ...

  8. 官网下载jdk

    http://www.oracle.com/technetwork/java/javase/downloads/index.html 第一步: 第二步:默认是显示最新版本的,如果需要其他版本的,拖到最 ...

  9. c# WinForm加载焦点

    1.c# WinForm在加载时把焦点设在按钮上 this.AcceptButton = button1; 这样在WinForm窗口中, 按钮的状态会变成窗口的默认按钮, 只要按下Enter键,就会触 ...

  10. IOS中类似的。9.png图片

    图形用户界面中的图形有两种实现方式,一种是用代码画出来,比如Quartz 2D技术,狠一点有OpenGL ES,另一种则是使用图片. 代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘空 ...