html5指南-4.使用Geolocation實現定位功能_html5教學技巧

今天我們要學習的是使用Geolocation來實現定位功能。我們可以透過navigator.geolocation取得Geolocation對象，他提供了下列方法：
getCurrentPosition(callback,errorCallback,options)：取得目前位置；
watchPosition(callback,error,options)：開始監控目前位置；
clearWatch(id)：停止監控目前位置。
note：下面範例使用的瀏覽器是chrome，使用其他瀏覽器我不能保證執行結果和範例顯示的結果一致。
1.取得目前位置
我們將使用getCurrentPosition方法取得目前位置，位置資訊不會以結果的形式直接傳回，我們需要使用callback函數進行處理。在取得座標的過程中會有些延遲，也會問你要存取權限。我們來看下面的例子：

複製代碼

代碼如下:

Longitude:	-	Lat​​itude:	-
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：指定儲存時間（毫秒）。我們來下下面的例子：

複製程式碼程式碼如下：

;


範例標題>

表格{邊框折疊：折疊;}
第，td{填充：4px;}
第{文字對齊：右;}
;
頭>



第：第>
-
緯度：
-


海拔高度：
-
準確度：
-


海拔高度精確度：
-
標題：
-


第：第>
- td>
第 時間戳：
-


錯誤代碼：
-
錯誤訊息：第>
-

表>

var options = {
enableHighAccuracy: false,
逾時: 2000,
maximumAge
};
navigator.geolocation.getCurrentPosition(displayPosition,handleError,options);
function displayPosition(pos) {
var properties = ["經度", "緯度", "高度", ","精準度", "高度精準度", "航向", "速度"];
for (var i = 0; i var value = pos.coords[properties[i] ];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
}
函數函數(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
腳本>
身體>

4.監視位置變化

介紹我們使用watchPosition方法實現監視的位置變化，他的使用方法和getCurrentPosition一樣。我們看範例：

複製程式碼

程式碼如下：

;


範例標題>

表格{邊框折疊：折疊;}
第，td{填充：4px;}
第{文字對齊：右;}
;
頭>



第：第>
-
緯度：
-


海拔高度：
-
準確度：
-


海拔高度精確度：
-
標題：
-


第：第>
- td>
第 時間戳：
-


錯誤代碼：
-
錯誤訊息：第>
-

表>
取消觀看

var options = {
enableHighAccuracy: false,
逾時: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosget, optionler. ").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var properties = ["經度", "緯度Position(pos) {
var 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;
腳本>
身體>



點擊取消觀看按鈕時，停止監視。

示範下載位址：
Html5Guide.Geolocation.zip