今天我們要學習的是使用Geolocation來實現定位功能。我們可以透過navigator.geolocation取得Geolocation對象,他提供了下列方法:
getCurrentPosition(callback,errorCallback,options):取得目前位置;
watchPosition(callback,error,options):開始監控目前位置;
clearWatch(id):停止監控目前位置。
note:下面範例使用的瀏覽器是chrome,使用其他瀏覽器我不能保證執行結果和範例顯示的結果一致。
1.取得目前位置
我們將使用getCurrentPosition方法取得目前位置,位置資訊不會以結果的形式直接傳回,我們需要使用callback函數進行處理。在取得座標的過程中會有些延遲,也會問你要存取權限。我們來看下面的例子:
Example
Longitude: |
- |
Latitude: |
- |
Altitude: |
- td>
|
Accuracy: |
- |
Altitude Accuracy: |
- |
Heading: |
- |
Speed: |
- |
Time Stamp: |
- |
<script> <br />navigator.geolocation.getCurrentPosition(displayPosition ); <br />function displayPosition(pos) { <br />var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed']; <br /> for (var i = 0, len = properties.length; i < len; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById('timestamp').innerHTML = pos.timestamp; <br />} <br /></script>
傳回的position物件包含兩個屬性,coords:傳迴座標資訊;timestamp:取得座標資訊的時間。其中coords又包含下面屬性:latitude:緯度;longitude:經度;altitude:高度;accuracy:精確度(公尺);altitudeAccuracy:高度精確度(公尺);heading:行進方向;speed:行進速度(公尺/秒) 。
並不是所有的資訊都會返回,這取決於你承載瀏覽器的設備。像是有GPS、加速器、羅盤的行動裝置會回傳大部分訊息,家用電腦就不行了。家用電腦獲取的位置信息,取決於所處的網絡環境或者是wifi。下面我們來看上例的運行結果。
點選允許,取得座標資訊。
2.處理異常 現在我們介紹getCurrentPosition的異常處理,他是透過使用errorCallback回呼函數來實現的。函數傳回的參數error包含兩個屬性,code:錯誤類型的代碼;message:錯誤訊息。 code包含三個值:1:使用者沒有授權使用geolocation;2:無法取得座標資訊;3:取得資訊逾時。
下面我們要看一個例子:
;
範例標題>
表格{邊框折疊:折疊;}
第,td{填充:4px;}
第{文字對齊:右;}
;
頭>
第:第>
- |
緯度:
- |
海拔高度: |
- |
準確度: |
- |
海拔高度精確度: |
- |
標題: |
- |
第:第>
- td> 第 |
時間戳: |
- |
錯誤代碼: |
- |
錯誤訊息:第>
-
|
表格>
navigator.geolocation.getCurrentPosition(displayPosition,handleError);
function displayPosition(pos(pos)(pos)> properties = ["經度", "緯度", "高度", "精度", "高度精確度", "航向", "速度"];
for (var i = 0; i
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp") .innerHTML = pos.timestamp;
}
函數handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage"). innerHTML = err.message;
}
腳本>
身體>
拒絕授權,運行結果:
3.使用geolocation可選參數項目
getCurrentPosition(callback,errorCallback,options)中的選項有以下參數可以使用,enableHighAccuracy:使用最好的效果;超時:超時時間(毫秒); maxAge:指定儲存時間(毫秒)。我們來下下面的例子: