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. 深入理解 Java 基本数据类型

    深入理解 Java 基本数据类型

  2. java面试准备之面向对象

    面向对象 下面列出了面向对象软件开发的优点: (1) 代码开发模块化,更易维护和修改. (2) 代码复用. (3) 增强代码的可靠性和灵活性. (4) 增加代码的可理解性. 面向对象编程有很多重要的特 ...

  3. iOS 基础：Frames、Bounds 和 CGGeometry

    https://segmentfault.com/a/1190000004695617 原文:<iOS Fundamentals: Frames, Bounds, and CGGeometry& ...

  4. Express使用art-template模板引擎

    第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...

  5. ORM基础之ORM介绍和基础操作

    一.ORM介绍 1.ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过 ...

  6. 关于rem布局

    实际UI设计稿给过来为了在手机屏幕上显示清晰,设计稿通常为实际标准手机页面的2倍,一般为640px(以ip5的屏幕尺寸320px设计)或者750px(以ip6的屏幕尺寸为375px设计),这是前提. ...

  7. #!/usr/bin/python3的作用 解决vscode ImportError: No module named xxxx

    在 Python 脚本的第一行经常见到这样的注释: #!/usr/bin/env python3 或者 #!/usr/bin/python3 含义 在脚本中, 第一行以 #! 开头的代码, 在计算机行 ...

  8. BSGS+exBSGS POJ2417+POJ3243

    a^x=b(mod p)求x,利用分块的思想根号p的复杂度求答案,枚举同余式两端的变量,用hash的方法去找最小的答案(PS:hash看上去很像链式前向星就很有好感).然后如果p不是质数时,就利用同余 ...

  9. BZOJ4036 按位或

    解:有两种做法...... 第一种,按照秘密袭击coat的套路,我们只需要求出即可.因为一种操作了i次的方案会被恰好计数i次. 那么这个东西怎么求呢?直接用FWT的思想,对于一个状态s,求出选择s所有 ...

  10. request对象的方法及其参数的传递

    先设计一个简单的登录界面index.htm: <html><head><title>request的使用</title></head>< ...