地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

　　在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。

　　HTML5 Geolocation API 使用非常简单，基本调用方式如下：　

1
2
3
4
5
6
7
8
9
10
11
12
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

　　locationError为获取位置信息失败的回调函数，可以根据错误类型提示信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

　　locationSuccess为获取位置信息成功的回调函数，返回的数据中包含经纬度等信息，结合Google Map API 即可在地图中显示当前用户的位置信息，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
locationSuccess: function(position){
    var coords = position.coords;    
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );  
    var myOptions = {  
        // 地图放大倍数  
        zoom: 12,  
        // 地图中心设为指定坐标点  
        center: latlng,  
        // 地图类型  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    // 创建地图并输出到页面  
    var myMap = new google.maps.Map(  
        document.getElementById("map"),myOptions  
    );  
    // 创建标记  
    var marker = new google.maps.Marker({  
        // 标注指定的经纬度坐标点  
        position: latlng,  
        // 指定用于标注的地图  
        map: myMap
    });
    //创建标注窗口  
    var infowindow = new google.maps.InfoWindow({  
        content:"您在这里<br/>纬度："+  
            coords.latitude+  
            "<br/>经度："+coords.longitude  
    });  
    //打开标注窗口  
    infowindow.open(myMap,marker); 
}

　　经过测试，Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的，估计都是用的同一个位置服务，数据如下：

　　而IE浏览器的和上面几款浏览器获取到的数据不一样，数据如下：

　　位置服务用于估计您所在位置的本地网络信息包括：有关可见 WiFi 接入点的信息（包括信号强度）、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。　

　　总的来说，在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高，如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余，但如果是做一个地图应用，那误差还是太大了。不过，如果是移动设备上的 HTML5 应用，可以通过设置 enableHighAcuracy 参数为 true，调用设备的 GPS 定位来获取高精度的地理位置信息。

转自：http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html

demo谷歌：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6. 	<title>Geolocation谷歌</title>
  7. 	<style type="text/css">
  8. 		body, html,#map {
  9. 			width: 100%;
  10. 			height: 100%;
  11. 			overflow: hidden;
  12. 			margin:0;
  13. 			font-family:"微软雅黑";
  14. 		}
  15. 	</style>
  16. 	<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=密钥" type="text/javascript"></script>
  17. 	<script>
  18. 		if (navigator.geolocation) {
  19. 		    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
  20. 		        // 指示浏览器获取高精度的位置，默认为false
  21. 		        enableHighAccuracy: true,
  22. 		        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
  23. 		        timeout: 5000,
  24. 		        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
  25. 		        maximumAge: 3000
  26. 		    });
  27. 		}else{
  28. 		    alert("Your browser does not support Geolocation!");
  29. 		}
  30.  
  31. 		function locationError(error){ // 失败的回调
  32. 		    switch(error.code) {
  33. 		        case error.TIMEOUT:
  34. 		            showError("A timeout occured! Please try again!");
  35. 		            break;
  36. 		        case error.POSITION_UNAVAILABLE:
  37. 		            showError('We can\'t detect your location. Sorry!');
  38. 		            break;
  39. 		        case error.PERMISSION_DENIED:
  40. 		            showError('Please allow geolocation access for this to work.');
  41. 		            break;
  42. 		        case error.UNKNOWN_ERROR:
  43. 		            showError('An unknown error occured!');
  44. 		            break;
  45. 		    }
  46. 		};
  47.  
  48. 		function locationSuccess(position){  // 成功的回调
  49. 		    var coords = position.coords;
  50. 		    var latlng = new google.maps.LatLng(
  51. 		        // 维度
  52. 		        coords.latitude,
  53. 		        // 经度
  54. 		        coords.longitude
  55. 		    );
  56. 		    var myOptions = {
  57. 		        // 地图放大倍数
  58. 		        zoom: 12,
  59. 		        // 地图中心设为指定坐标点
  60. 		        center: latlng,
  61. 		        // 地图类型
  62. 		        mapTypeId: google.maps.MapTypeId.ROADMAP
  63. 		    };
  64. 		    // 创建地图并输出到页面
  65. 		    var myMap = new google.maps.Map(
  66. 		        document.getElementById("map"),myOptions
  67. 		    );
  68. 		    // 创建标记
  69. 		    var marker = new google.maps.Marker({
  70. 		        // 标注指定的经纬度坐标点
  71. 		        position: latlng,
  72. 		        // 指定用于标注的地图
  73. 		        map: myMap
  74. 		    });
  75. 		    //创建标注窗口
  76. 		    var infowindow = new google.maps.InfoWindow({
  77. 		        content:"您在这里<br/>纬度："+
  78. 		            coords.latitude+
  79. 		            "<br/>经度："+coords.longitude
  80. 		    });
  81. 		    //打开标注窗口
  82. 		    infowindow.open(myMap,marker);
  83. 		};
  84.  
  85. 		function showError(txt){  // 报错信息
  86. 			console.log(txt);
  87. 		}
  88. 	</script>
  89. </head>
  90. <body>
  91. 	<div id="map"></div>
  92. </body>
  93. </html>

　　

demo百度和原生H5：

  1. <!DOCTYPE html>
  2. <html>
  3. <title>Geolocation和百度地图API进行地理定位实例</title>
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.         <style>
  8.             body, html,#container {
  9.                 width: 100%;
  10.                 height: 100%;
  11.                 overflow: hidden;
  12.                 margin:0;
  13.                 font-family:"微软雅黑";
  14.             }
  15.         </style>
  16.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
  17.     </head>
  18.     <body>
  19.         <div id="status" style="text-align: center"></div>
  20.         <div id="container"></div>
  21.     </body>
  22. </html>    
  23.  
  24. <script type="text/javascript">
  25.     //默认地理位置设置为上海市浦东新区
  26.     var x = 121.48789949,y = 31.24916171;
  27.     var tip = document.getElementById("status");
  28.     window.onload = function() {
  29.         if(navigator.geolocation) {
  30.             // navigator有3个方法:clearWatch、getCurrentPosition、watchPosition
  31.             navigator.geolocation.getCurrentPosition(showPosition);
  32.             document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
  33.                 // 百度地图API功能
  34.                 var map = new BMap.Map("container"); // 创建Map实例
  35.                 var point = new BMap.Point(x,y); // 设置中心点坐标
  36.                 map.centerAndZoom(point,12); // 初始化地图,设置中心点坐标和地图级别、
  37.                 map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
  38.                 map.setCurrentCity("上海"); // 设置地图显示的城市,此项是必须设置的
  39.                 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  40.  
  41.                 var geolocation = new BMap.Geolocation(); // geolocation 有2个方法:getCurrentPosition、getStatus
  42.                 geolocation.getCurrentPosition(
  43.                     function(r){ // 成功的回调
  44.                         console.log("通过百度地图定位");
  45.                         if(this.getStatus() == BMAP_STATUS_SUCCESS){
  46.                             var mk = new BMap.Marker(r.point);
  47.                             map.addOverlay(mk);
  48.                             map.panTo(r.point);
  49.                         }else {
  50.                             alert('failed'+this.getStatus()); // 此处的this指代 geolocation
  51.                         }
  52.                     },
  53.                     function(error){ // 失败的回调
  54.                         switch(error.code) {
  55.                             case error.TIMEOUT:
  56.                                 tip.innerHTML = "A timeout occured! Please try again!发生超时！请重试！";
  57.                                 break;
  58.                             case error.POSITION_UNAVAILABLE:
  59.                                 tip.innerHTML = 'We can\'t detect your location. Sorry!我们无法探测到你的位置,对不起！';
  60.                                 break;
  61.                             case error.PERMISSION_DENIED:
  62.                                 tip.innerHTML = 'Please allow geolocation access for this to work.请允许访问地理位置';
  63.                                 break;
  64.                             case error.UNKNOWN_ERROR:
  65.                                 tip.innerHTML = 'An unknown error occured!发生未知错误！';
  66.                                 break;
  67.                         }
  68.                     },{
  69.                     // 指示浏览器获取高精度的位置，默认为false
  70.                     enableHighAccuracy: true,
  71.                     // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
  72.                     timeout: 5000,
  73.                     // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
  74.                     maximumAge: 3000
  75.                 })
  76.             return;
  77.         }
  78.         alert("你的浏览器不支持获取地理位置！");
  79.     };
  80.     function showPosition(position){  // 成功的回调
  81.         console.log("通过原生H5的geolocation定位");
  82.         x = position.coords.latitude; // 维度
  83.         y = position.coords.longitude; // 经度
  84.     };
  85. </script>

　　

Geolocation 地理定位的更多相关文章

  1. Geolocation地理定位

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  3. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  4. JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  5. JS新API标准 地理定位（navigator.geolocation）

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  6. Xamarin Essentials教程地理定位Geolocation

    Xamarin Essentials教程地理定位Geolocation   通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值.利用地理位置,可以在地图上定位,也可以转化物理位置,划分用 ...

  7. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

  8. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  9. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

随机推荐

  1. bzoj 1018 线段树维护连通性

    本题将一道LCT的题特殊化(支持加边和删边,询问图的连通性),将图变成了2×m的网格图,然后就神奇地可以用线段树来维护. 对于每个区间[l,r],维护其四个角落之间的连通性(仅仅通过[l,r]这段的边 ...

  2. bzoj 4769: 超级贞鱼 -- 归并排序

    4769: 超级贞鱼 Time Limit: 1 Sec  Memory Limit: 128 MB Description 马达加斯加贞鱼是一种神奇的双脚贞鱼,它们把自己的智慧写在脚上——每只贞鱼的 ...

  3. Codeforces Round #305 (Div. 1) B. Mike and Feet 单调栈

    B. Mike and Feet Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/547/pro ...

  4. Shell基础学习(三) 传递参数

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 以下实例我们向脚本传递三个参数 ...

  5. linux基础命令学习（一）系统的关机、重启以及注销

    1.shutdown shutdown 参数说明: [-t] 在改变到其它runlevel之前﹐告诉init多久以后关机. [-r] 重启计算器[reboot]. [-k] 并不真正关机﹐只是送警告信 ...

  6. mybatis源码分析（7）-----缓存Cache（一级缓存，二级缓存）

    写在前面  MyBatis 提供查询缓存,用于减轻数据库压力,提高数据库性能. MyBatis缓存分为一级缓存和二级缓存. 通过对于Executor 的设计.也可以发现MyBatis的缓存机制(采用模 ...

  7. Dual-voltage regulator meets USB-power needs

    This Design Idea stems from the limited availability of IC voltage regulators that can meet key USB- ...

  8. maven，阿里云国内镜像，提高jar包下载速度

    镜像 maven默认会从中央仓库下载jar包,这个仓库在国外,而且全世界的人都会从这里下载,所以下载速度肯定是非常慢的.镜像就相当于是中央仓库的一个副本,内容和中央仓库完全一样,目前有不少国内镜像,其 ...

  9. 老生常谈javascript的5中继承

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Appium+python自动化15-在Mac上环境搭建

    前言 mac上搭建appium+python的环境还是有点复杂的,需要准备的软件 1.nodejs 2.npm 3.cnpm 4.appium 5.pip 6.Appium-Python-Client ...