現在定位功能很常用，所以抽出一些時間將這個功能的知識總結一下作為知識梳理的依據。HTML5 Geolocation的定位用法很簡單，首先請求位置信息，用戶同意，則返回位置信息。HTML5 Geolocation僅僅是用來檢索定位信息的API，至於底層是如何定位的他也不知道，他就相當於一個傳信的，你說是1，ok，那我就給用戶傳個1，僅此而已。
1).位置信息來源的分類和特點
1.IP定位
優點：任何地方都可以。
在服務器端處理。
缺點：不准確，只能精確到市級。
2.GPS定位
優點：比較准確。
缺點：定位時間長。
室內效果不好。
需要硬件設備支持。
3.Wi-Fi定位
優點：精確。
簡單快捷。
可在室內定位。
缺點：適合大城市，對於鄉村無接入點的地區幾乎用不了。
4.手機定位
優點：非常精確。
可在室內使用。
簡單快捷。
缺點：在沒有基站的地方幾乎用不了。
5.自定義定位
優點：可以獲取比程序定位服務更准確的位置數據。
允許地理定位服務的結果作為備用位置信息。
用戶自行輸入可能比自動檢測更快。
缺點：可能不准確，特別是當用戶的位置改變的時候。
2)Geolocation AIP的使用
1.檢測瀏覽器的支持性。
在HTML5中，通過window.navigator對象下新增geolocation屬性來判斷瀏覽器的兼容性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function geolocationSupport() { if(!navigator.geolocation) { alert('當前瀏覽器不支持HTML5 Geolocation') } else { alert('當前瀏覽器支持HTML5 Geolocation') } } geolocationSupport(); </script> </body> </html>
2.獲取當前地理位置
我們使用getCurrentPosition(success(position),error(err),options)方法來獲取當前用戶的地理位置。
success(position)回調函數是在獲取到地理信息時調用的，其中的position參數是一個對象包括: latitude(緯度)
longitude(經度)
altitude(海拔高度)
accuracy(緯度和經度的精度，以米為單位)
latitudeAccuracy(海拔高度的精度，以米為單位)
heading(設備的前進方向),speed(設備的前進速度以單位m/s)
timestamp(獲取位置的時間)。
error(err)回電函數是在獲取地理位置失敗時調用的，其中err參數有倆個屬性：code和message，code{1:表示用戶拒絕了定位服務,2:獲取不到位置信息,3:獲取信息超時錯誤}，message是字符串，表示錯誤信息。
opations是一些可選屬性的列表包括: enableHighAccuracy(是否要求高精度的地理位置信息),值為true或false。
timeout(對地理信息獲取操作做一個超時限制，如果超時，則返回錯誤)，值為數字，單位為毫秒。
maximumAge(對地理位置信息進行緩存的有效時間做一個限制)，值為數字，單位為毫秒。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function geolocationSupport() { if(!navigator.geolocation) { alert("你的瀏覽器不支持HTML5 Geolocation"); } else { getCurrentPosition(); } } function getCurrentPosition(){ var options={ enableHighAccuracy:true, timeout:60000, maximumAge:60000 } navigator.geolocation.getCurrentPosition(success,error,options) } function success(position) { var x=position.coords.longitude; var y=position.coords.latitude; alert("經度為:"+x+"緯度為:"+y); } function error(err) { var errorTypes={ 1:"用戶拒絕定位服務", 2:"獲取不到定位信息", 3:"獲取定位信息超時" } alert(errorTypes[err.code]); } window.onload=geolocationSupport(); </script> </body> </html>
下面給大家分享一個在PC端可以顯示定位地圖的代碼：
<!DOCTYPE html> <html> <title>HTML5調用百度地圖API進行地理定位實例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script> </head> <body style="margin:50px 10px;"> <div id="status" style="text-align: center"></div> <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div> </body> </html> <script type="text/javascript"> window.onload = function() { var x,y; if(navigator.geolocation) { document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser."; // 百度地圖API功能 var map = new BMap.Map("container"); var point = new BMap.Point(x,y); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) return; } }; </script>
最后再說一下watchPosition和clearPosition，用於地理位置監聽和清除監聽，watchPosition的用法和getCurrentPosition相同，而且watchPosition與clearPosition的關系和setInterval與clearInterval一樣的用法，所以不多說了。