HTML5 - 使用Geolocation(地理定位)获取用户的位置
一、Geolocation(地理定位)
1,基本介绍
(1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的。
(2)通过地理定位 Geolocation API 可以获得用户的地理位置(当前位置的地理坐标)。
注意:鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

2,浏览器支持情况
无论是桌面设备,还是移动设备。主流的浏览器都是可以支持 Geolocation 的。注意 IE 浏览器,是从 IE9 起开始支持 Geolocation。
二、获取当前的定位信息
1,getCurrentPosition()方法介绍
getCurrentPosition(geo_success, geo_error?, geo_options?)
该方法用于获取当前的位置,其参数如下:
(1)geo_success:成功回调函数
(2)geo_error:失败回调函数
(3)geo_options:传递的参数。其支持的属性有:
- timeout:指定获取地理位置的超时时间,默认不限时。单位为毫秒。
- maximumAge:最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为 0,表示浏览器需要立刻重新计算位置。
- enableHighAccuracy:指示浏览器获取高精度的位置,默认为 false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
2,效果图
点击“获取位置”按钮后,获取当前设备地理位置信息,并显示在页面上。

3,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GPS</title> <script> //显示结果的区域对象 var result; window.onload = function(){ result = document.getElementById("result") } //获取位置 function getLocation(){ if( navigator.geolocation ){ navigator.geolocation.getCurrentPosition( showPosition, handleLocationError, {maximumAge:60000, timeout:50000, enableHighAccuracy:true} ); }else{ result.innerHTML="该设备不支持gps定位"; } } //获取位置失败处理 function handleLocationError(error) { switch(error.code){ case 0: alert("获取位置信息出错!"); break; case 1: alert("您设置了阻止该页面获取位置信息!"); break; case 2: alert("浏览器无法确定您的位置!"); break; case 3: alert("获取位置信息超时!"); break; } } //显示位置 function showPosition(position){ result.innerHTML="经度: " + position.coords.latitude + "<br>纬度: " + position.coords.longitude + "<br>准确度:" + position.coords.accuracy + "<br>海拔:" + position.coords.altitude + "<br>海拔准确度:" + position.coords.altitudeAccuracy + "<br>时间戳:" + position.timestamp; } </script> </head> <body style="font-size:100"> <button onclick="getLocation()">获取位置</button> <p id="result"></p> </body> </html>
二、监视定位变化
1,watchPosition()方法介绍
如果我们需要设定一个回调函数来不断响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息)。可以通过 watchPosition() 函数实现该功能。
- watchPosition() 与 getCurrentPosition() 接收的参数相同,但回调函数会被调用多次。
- 我们可以直接调用 watchPosition() 函数,不需要先调用 getCurrentPosition() 函数。
2,clearWatch()方法介绍
根据传入的 watchid 来对应的位置监听活动。
3,效果图
(1)点击“开始监听”按钮后便开始监视设备的位置变化,每当定位信息有发生变化则会更新显示当前位置信息。
(2)点击“停止监听”按钮则停止对设备位置变化的监视。

4,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GPS</title> <script> //显示结果的区域对象 var result; //监听定位的id var watchID = null window.onload = function(){ result = document.getElementById("result") } //开始监听位置变化 function beginWatch(){ if( navigator.geolocation ){ watchID = navigator.geolocation.watchPosition( showPosition, handleLocationError, {maximumAge:60000, timeout:50000, enableHighAccuracy:true} ); }else{ result.innerHTML="该设备不支持gps定位"; } } //停止监听位置变化 function stopWatch() { navigator.geolocation.clearWatch(watchID); } //获取位置失败处理 function handleLocationError(error) { switch(error.code){ case 0: alert("获取位置信息出错!"); break; case 1: alert("您设置了阻止该页面获取位置信息!"); break; case 2: alert("浏览器无法确定您的位置!"); break; case 3: alert("获取位置信息超时!"); break; } } //显示位置 function showPosition(position){ result.innerHTML="经度: " + position.coords.latitude + "<br>纬度: " + position.coords.longitude + "<br>准确度:" + position.coords.accuracy + "<br>海拔:" + position.coords.altitude + "<br>海拔准确度:" + position.coords.altitudeAccuracy + "<br>时间戳:" + position.timestamp; } </script> </head> <body style="font-size:100"> <button onclick="beginWatch()">开始监听</button> <button onclick="stopWatch()">停止监听</button> <p id="result"></p> </body> </html>