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. .netcore mvc docker环境jenkins一键部署（DevOps）

    [前言] DevOps方面的文章很早之前就想分享了,挤出一点时间把前段时间搭建的一些提高开发效率的东西给大家分享一下吧. 本文介绍了一个.netcore mvc web项目,从项目push到githu ...

  2. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. 好的LCT板子和一句话

    typedef long long ll; const int maxn = 400050; struct lct { int ch[maxn][2], fa[maxn], w[maxn]; bool ...

  4. python批量修改linux主机密码

    +++++++++++++++++++++++++++++++++++++++++++标题:python批量修改Linux服务器密码时间:2019年2月24日内容:基于python实现批量修改linu ...

  5. 科大讯飞语音合成api

    import base64import jsonimport timeimport hashlibimport requests # API请求地址.API KEY.APP ID等参数,提前填好备用a ...

  6. sql server 一直提示正在还原

    restore database  数据库名称 with recovery

  7. CentOS修改SSH端口号和禁止root用户直接登录

    linux安装ssh远程登录后,为了安全起见,修改默认的22端口号并禁止root用户直接通过ssh登录. 配置方法如下: 1.使用vi编辑器打开ssh配置文件 /etc/ssh/sshd_config ...

  8. windows配置MySQL

    mysql安装.启动和基础配置 --windows版本 1.把下载好的zip文件解压到任意目录下,这个目录就是mysql的安装目录. 2.打开目录找到my-default.ini这个配置文件,复制这个 ...

  9. [LOJ2310][APIO2017]斑斓之地——可持久化线段树

    题目链接: [APIO2017]斑斓之地 将不是河流的格子染成白色,是河流的格子染成黑色,那么连通块数就是白色格子数$-1*2$的联通白色格子数$-2*1$的联通白色格子数$+2*2$的联通白色格子数 ...

  10. Scrapy 框架，持久化文件相关

    持久化相关 相关文件 items.py 数据结构模板文件.定义数据属性. pipelines.py 管道文件.接收数据(items),进行持久化操作. 持久化流程 1.爬虫文件爬取到数据后,需要将数据 ...