demo截图:

demo链接

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>地图定位</title>

     <style>

     *,body,html{  margin:0;padding:0;height:100%;width:100%; }

     li{ list-style: none;}

     .box{width:1000px;margin:0 auto;}

     ul{ padding:20px; }

     li{height:30px; font-size: 14px;line-height: 30px; }

     span{ float:left;width:100px;text-align: right; }

     div{margin-left:100px;padding-left: 10px;}

     </style>

     <script>

     window.onload = function(){

         // 判断浏览器是否支持定位;

         if( navigator.geolocation ){

             var watchId = null;

             var oBox = document.getElementById('box'),

                 aDivs = oBox.getElementsByTagName('div');

             /**

              * Geolocation分两种：‘单次定位请求’、‘重复定位请求’：

              * 重复更新位置请求(不允许指定多长时间请求一次) 第一个参数(watchMap)执行的函数,第二个参数(handleError) 错误执行函数,第三个参数JSON:

              *     {

              *         enableHighAccuracy : 高精度模式 (true/false),谨慎使用;

              *         timeout            : 允许最长时间计算，就会调用错误处理函数(ms);

              *          maximumAge         : 从新计算位置的时间间隔(ms);

              *    }

             */

             watchId = navigator.geolocation.watchPosition(watchMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 });

             //一次更新位置请求

             //watchId = navigator.geolocation.getCurrentPosition(onceMap, handleError, {enableHighAccuracy:true,timeout:5000, maximumAge: 5000 });

             //重复请求的函数;

             function watchMap( position ){

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

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

                 var accuracy = position.coords.accuracy; //准确度;

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

                 //如果浏览器支持否则只会返回null/undefined:

                 var altitude = position.altitude;  //海拔高度(m);

                 var altitudeAccuracy = position.altitudeAccuracy;  //海拔高度精确度(m);

                 var heading = position.heading;  //行进的方向(相对正北方向);

                 var speed = position.speed;  //地面速度(m/s);

                 //判断准确度小于3000;

                 if( accuracy <= 3000 ){

                     aDivs[0].innerHTML = latitude;

                     aDivs[1].innerHTML = longitude;

                     aDivs[2].innerHTML = accuracy;

                     aDivs[3].innerHTML = timestamp;

                     aDivs[4].innerHTML = altitude;

                     aDivs[5].innerHTML = altitudeAccuracy;

                     aDivs[6].innerHTML = heading;

                     aDivs[7].innerHTML = speed;

                     navigator.geolocation.clearWatch(watchId);  //停止重复求情;

                 }

             }

             //一次请求的函数;

             function onceMap( position ) {  

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

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

                 var accuracy = position.coords.accuracy; //准确度;

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

                 //如果浏览器支持否则只会返回null:

                 var altitude = position.altitude;  //海拔高度(m);

                 var altitudeAccuracy = position.altitudeAccuracy;  //海拔高度精确度(m);

                 var heading = position.heading;  //行进的方向(相对正北方向);

                 var speed = position.speed;  //地面速度(m/s);

                 //判断准确度小于3000;

                 if( accuracy <= 3000 ){

                     aDivs[0].innerHTML = latitude;

                     aDivs[1].innerHTML = longitude;

                     aDivs[2].innerHTML = accuracy;

                     aDivs[3].innerHTML = timestamp;

                     aDivs[4].innerHTML = altitude;

                     aDivs[5].innerHTML = altitudeAccuracy;

                     aDivs[6].innerHTML = heading;

                     aDivs[7].innerHTML = speed;

                 }

             }

             //错误处理;

             function handleError( error ){

                 switch (error.code) {  //错误编号;

                     case 1:

                         alert("位置服务被拒绝");

                         break;

                     case 2:

                         alert("暂时获取不到位置信息");

                         break;

                     case 3:

                         alert("获取信息超时");

                         break;

                     default:

                         alert("未知错误");

                         break;

                 }  

             }

         }

     }

 </script>

 </head>

 <body>

     <div class="box" id="box">

         <ul>

             <li>

                 <span>

                     纬度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     经度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     准确度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     时间:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     海拔高度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     海拔精确度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     行进方向:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     地面速度:

                 </span>

                 <div>

                 </div>

             </li>

             <li>

                 <span>

                     错误信息:

                 </span>

                 <div>

                 </div>

             </li>

         </ul>

     </div>

 </body>

 </html>

后记:

客观的说基本没用，百度地图，高德地图做的都很完善了。

html5 - 地图的更多相关文章

  1. 7款个性化jQuery/HTML5地图插件

    现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...

  2. HTML5——地图应用

    我们就拿百度地图举例吧: 废话少说,直接上Demo 简要截图如下:' 简要代码如下: <!DOCTYPE html> <html> <head> <title ...

  3. HTML5地图分布动画

    在线演示 本地下载

  4. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  5. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  6. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  7. Html5——地理定位及地图

    常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callbac ...

  8. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  9. html5 的百度地图连接

    在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...

随机推荐

  1. yum 彻底删除nodejs，重新安装

    第一步 用自带的包管理先删除一次 yum remove nodejs npm -y1手动删除残留 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹进入 /us ...

  2. Python 属性描述符和属性的查找过程

    属性描述符可以用来控制给属性赋值的时候的一些行为 import numbers class IntField: def __get__(self, instance, owner): return s ...

  3. mybatis 使用接口绑定

    使用selectList,selectOne..的缺陷 刚开始学习mybatis的时候,使用selectList或者selectOne,传入要调用的mapper,如果又参数要传递的话,就需要将参数进行 ...

  4. java list map set array 转换

    1.list转set Set set = new HashSet(new ArrayList()); 2.set转list List list = new ArrayList(new HashSet( ...

  5. Git里有些费解的术语和设计

    关于暂存区, 好几个地方都写到了 正在编辑的文件 --> Unchacked/Modified, 而Unchacked/Modified, 的状态也可以叫 to be committed . 这 ...

  6. Python——日志模块（logging）

    一.日志说明 日志是跟踪软件运行时所发生的事件的一种方法.软件开发者在代码中调用日志函数,表明发生了特定的事件.事件由描述性消息描述,该描述性消息可以可选地包含可变数据(即,对于事件的每次出现都潜在地 ...

  7. 爬虫系列之mongodb

    mongo简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  8. 帝国CMS Table '***.phome_ecms_news_data_' doesn't exist

      帝国CMS刷新内容页出现以下错误 1 Table 'www.536831.com.phome_ecms_news_data_' doesn't exist select keyid,dokey,n ...

  9. [NOI2009]变换序列（二分图匹配）

    我们先不考虑字典序最小,先来求出一种可行解. 不难发现,对于每一个i值,它所对应的T值在模n意义下最多两个,于是我们可以用二分图匹配来判断. 那字典序最小呢? 回顾一下二分图匹配的算法:网络流?貌似不 ...

  10. Mac spotlight无法搜索的解决方法

    出现问题: 1. 在打开spotlight快速搜索的时候输入两个字符,后该搜索框自动会消失,很是奇怪重启等操作也没有效果 问题原因: 可能因为之前因为耗电原因关闭的全局搜索的索引,或者由于索引出现错误 ...