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. TensorRT&Sample&Python[end_to_end_tensorflow_mnist]

    本文是基于TensorRT 5.0.2基础上,关于其内部的end_to_end_tensorflow_mnist例子的分析和介绍. 1 引言 假设当前路径为: TensorRT-5.0.2.6/sam ...

  2. python2.7添加注释后，代码无法保存

    最近需要学习一下Python,然后开始学习中,使用的编辑环境是Python自带的IDLE Python的注释使用的是   # 然后我再代码添加注释 #Python的注释是这个字符 发现始终无法保存代码 ...

  3. c# pda

    1.去除标题栏 FormBorderStyle属性设置为none 2.去除任务栏 [System.Runtime.InteropServices.DllImport("coredll.dll ...

  4. Mac之brew使用

    brew : 终端程序管理工具 能让你更快速的安装你想要的工具.而不用考虑大量的依赖. 安装命令 给官网的一样也可以自己去官网查看 它就类似于centos下的yum 和 Ubuntu下的apt-get ...

  5. 在QT中使用C/C++, 在linux下生成 .so, 并调用 .so

    时间不早了, 先下班了... 明天再写..

  6. gitignore的使用

    gitignore的作用是忽略文件的提交,被加入到gitignore中的文件不会被提交到文件服务器 通常需要添加到.gitignore的文件有: (1)缓存相关文件,编译相关文件,运行时相关文件 (2 ...

  7. shell脚本自动化部署服务

    shell脚本自动化部署 !/bin/bash #export PATH=$PATH:/export/maven/bin run_flag_dir="/data0/shell/deploy_ ...

  8. 【LR9】【LOJ561】CommonAnts 的调和数 数论 筛法

    题目大意 有一个长度为 \(n\) 的序列. 有 \(m\) 次修改,每次给你 \(x,y\),令 \(\forall 1\leq i\leq \lfloor\frac{n}{x}\rfloor,a_ ...

  9. C++ 动态链接库 DLL 的一些笔记

    DLL 文件源代码: // test.h #ifdef TEST_EXPORTS #define TEST_API __declspec(dllexport) #endif class TEST_AP ...

  10. [NOI2009]诗人小G（dp + 决策单调性优化）

    题意 有一个长度为 \(n\) 的序列 \(A\) 和常数 \(L, P\) ,你需要将它分成若干段,每 \(P\) 一段的代价为 \(| \sum ( A_i ) − L|^P\) ,求最小代价的划 ...