HTML5 地理位置定位（HTML5 Geolocation）原理及應用

標籤：開啟   天氣   window   for   i/o   article   text   裝置   this   

         地理位置（Geolocation）是 HTML5 的重要特性之中的一個，提供了確定使用者位置的功能，藉助這個特性可以開發基於位置資訊的應用。

今天這篇文章向大家介紹一下HTML5 地理位置定位的基本原理及各個瀏覽器的資料精度情況。

　　在訪問位置資訊前，瀏覽器都會詢問使用者是否共用其位置資訊，以 Chrome 瀏覽器為例，假設您同意 Chrome 瀏覽器與網站共用您的位置，Chrome 瀏覽器會向 Google 位置服務發送本網資訊，預計您所在的位置。

然後，瀏覽器會與請求使用您位置的網站共用您的位置。

　　HTML5 Geolocation API 使用很easy，基本調用方式例如以下：

if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{        // 指示瀏覽器擷取高精度的位置。默覺得false        enableHighAcuracy: true,        // 指定擷取地理位置的逾時時間，預設不限時。單位為毫秒        timeout: 5000,        // 最長有效期間，在反覆擷取地理位置時，此參數指定多久再次擷取位置。        maximumAge: 3000    });}else{    alert("Your browser does not support Geolocation!");}

        locationError為擷取位置資訊失敗的回呼函數。能夠依據錯誤類型提示資訊：

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 就可以在地圖中顯示目前使用者的位置資訊。例如以下：

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 定位來擷取高精度的地理位置資訊。

HTML5 地理位置定位（HTML5 Geolocation）原理及應用