HTML5 Geolocation API
HTML5 geolocation API技术（地理定位技术），应用请求用户共享位置，提供位置相关的信息；或者是构建计算步行（跑步）路程的应用程序，在运动中启动记录功能；还有就是基于GPS导航的社交网络应用。目前Geolocation API中有两种类型的定位请求函数：单次定位请求和重复性的位置更新请求。
在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。
返回的位置信息，是通过支持HTML5地理定位功能的底层设备（笔记本电脑或手机）提供给浏览器的。位置信息由经纬度和一些其他元数据组成（取决于浏览器所在的硬件设备，包括还把、行驶方向和速度等），利用这些信息，可以构建位置感知类应用程序。
经纬度坐标可以使用十进制（39.1722）或者是DMS（角度，39°10′20″）格式。
位置信息从何而来
Geolocation API不能保证设备返回数据的准确性，设备可以使用下列数据源：
IP地址和三维坐标（GPS全球定位系统，WiFi的MAC地址，GSM或CDMA手机的ID和用户自定义数据）
IP地址，如果用户的IP地址是由ISP提供的，其位置往往就是由服务供应商的物理地址决定，不精确，而且在服务器端运算代价大。
GPS地理定位数据，通过手机运行在地球周围多个GPS卫星的信号提供，提供非常准确的定位结果，但是定位时间长，不适宜需要快速响应的应用程序。
WIFI地理定位数据，是通过三角计算得出的，用户当前位置到已知的多个WIFI接入点的距离，可在室内使用，简单快捷。
手机地理定位数据，通过用户到一些基站的三角距离确定，通常基于WIFI和GPS的地理定位信息结合使用。
重要提示，应用程序不能直接访问设备，它只能请求浏览器来代表他访问设备。
浏览器支持检查
当浏览器不支持时，可以提供一些替代文本，以提示用户升级浏览器或安装插件来增强现有浏览器功能：
(function loadDemo(){ if(navigator.geolocation){ document.getElementById("support").innerHTML = "geolocation support"; }else{ document.getElementById("support").innerHTML = "geolocation not supporet"; } })();
坐标还有一些特性，不能保证浏览器都为其提供支持，但如果不支持就会返回null（例如如果使用笔记本电脑，就无法访问用户位置还把高度altitude、行进方向heading、地面速度speed）
demo
window.onload=function(){ var options={ enableHighAccuracy:true, maximunAge:1000, timeout:45000 }; if(window.navigator.geolocation){ navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options); }else{ alert("你的浏览器不支持定位!"); } } function successCallback(position){ var output=""; output +="Your position has bean located . \r\n"; output+=" Latitude:"+position.coords.latitude+" "; output+=" Longitude:"+position.coords.longitude+" "; output+=" Accuracy :"+position.coords.accuracy +" meters"; if(position.coords.latitude){ output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters"; } if(position.coords.heading){ output+=" Heading :"+position.coords.Heading +" meters"; } if(position.coords.speed){ output+=" Speed :"+position.coords.Speed +" m/s"; } output+=" Time of Position "+position.timestamp +" m/s"; alert(output); }
function errorCallback(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("you have denied access to your position ."); break; case error.POSITION_UNAVAILABLE: alert("there was a problem getting yout position ."); break; case error.TIMEOUT: alert("The application has timed out attempting to get your location ."); break; } }
Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition
2、watchPosition
3、clearWatch
核心函数的调用
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
successCallback指明位置数据可用时应调用的函数，因为像获取位置数据这样的操作可能需要比较长的时间才能完成。没有用户希望在检索位置时浏览器所锁定，也没有开发人员希望它们的程序无限期暂停。successCallback是收到实际位置信息并进行处理的地方。
errorCallback位置信息请求很可能因为一些不可控因素失败，参数是可选的，不过建议选用。提供一个用于跟用户解释或者提示其重试的函数。
options对象可以调整html5 geolocation服务的数据收集方式。
option
enableHighAccuracy:通知浏览器启用html5服务高精确度模式
maximunAge:表示浏览器重新计算位置的时间间隔，以ms为单位的值，默认为ns为单位的值，每次请求必须立即计算位置。
timeout:告诉浏览器计算当前位置所允许的最长时间，如果超过这个时间没有完成计算，就会调用错误处理程序，默认为infinity无限大。
对于错误编号
PERMISSION_DENIED:用户选择拒绝浏览器获取其位置信息
POSITION_UNAVAILABLE:尝试获取用户位置数据，但失败
TIMEOUT:设置可选的timeout值，会尝试确定用户位置的过程超时。
coords属性有7个值，包含上面用到的纬度、经度
1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度
百度地图结合HTML5 Geolocation API
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>百度地图</title> 6 <script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script> 7 <script type='text/javascript'> 8 9 function getLocation(){ 10 if(navigator.geolocation){ 11 navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000}); 12 }else{ 13 alert('您的浏览器不支持使用HTML 5来获取地理位置服务'); 14 } 15 } 16 17 function showMap(value){ 18 var longitude = value.coords.longitude; 19 var latitude = value.coords.latitude; 20 var map = new BMap.Map('map'); 21 var point = new BMap.Point(longitude, latitude); // 创建点坐标 22 map.centerAndZoom(point, 15); 23 var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注 24 map.addOverlay(marker); // 将标注添加到地图中 25 } 26 27 function handleError(value){ 28 switch(value.code){ 29 case 1: 30 alert('位置服务被拒绝'); 31 break; 32 case 2: 33 alert('暂时获取不到位置信息'); 34 break; 35 case 3: 36 alert('获取信息超时'); 37 break; 38 case 4: 39 alert('未知错误'); 40 break; 41 } 42 } 43 44 function init(){ 45 getLocation(); 46 } 47 48 window.onload = init; 49 50 </script> 51 </head> 52 53 <body> 54 <div id='map' style='width:600px;height:600px;'></div> 55 </body> 56 </html>