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. gulp 自动ftp至服务器时，处理开发 测试服务器地址问题

    var gulp=require('gulp'), babel = require('gulp-babel'), gulpSequence = require('gulp-sequence'), ht ...

  3. 深入剖析Redis系列：Redis数据结构与全局命令概述

    前言 Redis 提供了 5 种数据结构.理解每种数据结构的特点,对于 Redis 的 开发运维 非常重要,同时掌握 Redis 的 单线程命令处理 机制,会使 数据结构 和 命令 的选择事半功倍. ...

  4. python和anacoda安装第三方库的位置

    查看已安装库及版本号,命令行pip list 安装第三方库位置:

  5. react的jsx语法

    在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...

  6. 使用Crowd集成Confluence与JIRA

    一. 独立安装Crowd,步骤1-步骤13的内容二. 设置Confluence使用Crowd进行认证.步骤14-18的内容三. 设置JIRA使用Crowd进行认证,并使用Confluence的组织机构 ...

  7. oracle--数据筛选

    一:当统一社会信用代码或者工商注册号两个字段中,有的时候只有一个字段含有数据,但是所取的值必须要拥有字段,这个时候,语句为下: select t.entname, case when t.unisci ...

  8. Oracle SQLULDR2 以及 SQLLDR 进行导入导出的功能说明

    Study From http://blog.itpub.net/28291944/viewspace-2142187/ 自己尝试了下 可以实现. 下载完sqluldr2,文件夹内容如下:sqluld ...

  9. js判断数组中有没有指定元素

    list.findIndex(target => target.sel === 指定元素) ,如果找到返回下标,如果没有返回-1

  10. java对象池commons-pool-1.6详解（一）

    自己的项目中用到了 对象池 commons-pool: package com.sankuai.qcs.regulation.protocol.client; import com.dianping. ...