.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N120812703
出刊日期：2012/08/29
HTML5定義了Geolocation API，可以取得目前的地理位置，像是經度、緯度等等資訊，這對於有行動裝置的使用者而言非常的便利，您可以結合地圖資訊，隨時透過Geolocation API顯示使用者所在位置。
Geolocation是指能夠找到使用者所在地理位置的能力，Geolocation API 能夠讓你透過瀏覽器定時取得使用者所在的位置。不過瀏覽器需要取得使用者同意才能透露使用者所在的地理位置。
Geolocation API
Geolocation API中提供一個window.navigator.geolocation物件，它包含三個主要的方法：
- getCurrentPosition：取得使用者的地理位置一次。
- watchPosition：可定期取得使用者的地理位置。
- clearWatch：停止取得使用者的地理位置。
參考以下使用Geolocation API中getCurrentPosition方法來取得使用者所在地理定位資訊的範例：
<!DOCTYPE html>
<html lang = "zh-tw" >
<head>
<title> Geolation </title>
<script type = "text/javascript" charset = "utf-8" >
function successCallback (position ) {
var result = document.getElementById( 'result' );
result.innerHTML =
"緯度 : " + position.coords.latitude +
", 經度 : " + position.coords.longitude +
", 精確度 : " + position.coords.accuracy +
", 時間戳記 : " + position.timestamp ;
}
function errorCallback( error ) {
alert( '執行發生錯誤! 錯誤代碼 :' + error.code + ', 錯誤訊息 :' + error.message );
}
function contentLoaded () {
if ( navigator.geolocation ) {
alert( "你的瀏覽器支援 geolocation!!" );
navigator.geolocation.getCurrentPosition( successCallback, errorCallback );
} else {
alert( "你的瀏覽器不支援 geolocation!!" );
}
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<div id = "result"> </div>
</body>
</html>
在網頁載入時，接聽DOMContentLoaded事件，當事建發生時，我們先利用navigator.geolocation來判斷瀏覽器是否支援Geolocaiton API，若回傳true，則表示瀏覽器支援。若瀏覽器支援Geolocaiton API，便叫用navigator.geolocation.getCurrentPosition方法來取得使用者所在的地理定位資訊。
getCurrentPosition方法傳入兩個參數，一為成功取得地理定位資訊之後，想要執行的函式名稱，以本例而言為successCallback方法；第二個參數則是取得地理定位資訊失敗之後，想要執行的函數的名稱，以本例而言為errorCallback方法。有時getCurrentPosition方法會傳入第三個參數，為一個PositionOption物件，可以設定查詢時額外的選項。
在本範例中若getCurrentPosition方法成功取得使用者所在的地理資訊位置時，將會叫用successCallback方法，此方法會傳入一個Position物件，包含一個coords屬性，這個屬性是一個Coordinates物件，從它的latitude屬性可以取得緯度；而從longitude屬性可以取得經度資訊。Coordinates物件的accuracy則表示精確度。Position物件還有一個timestamp屬性，則是表示取得地理資訊位置時的時間戳記資料。
若getCurrentPosition方法取得使用者所在的地理資訊位置失敗時，將會叫用errorCallback方法，這個方法將傳入一個PositionError物件，此物件包含兩個屬性：code屬性代表錯誤代碼；而message屬性則是發生的錯誤訊息。
請參考圖1所示，這是本範例在Chrome瀏覽器上執行的結果，執行時，瀏覽器會提示使用者網站應用程式想要追蹤使用者所在的地理定位資訊。另外要注意的是，若使用Chrome瀏覽器(版本19)，需要將網頁放在網站伺服器，以http方式來執行，否則預設會拒絕授權無法存取，而Firefox (版本13)與ie 9瀏覽器，則可以直接使用File方式來開啟。
圖 1：Chrome瀏覽器提示使用者欲追蹤使用者所在的地理定位資訊。
若使用者選取了拒絕項目，則馬上會產生錯誤，網頁會顯示出錯誤訊息，請參考圖2所示：
圖 2：使用者未授權則無法取得地理資訊位置。
若使用者選取允許讓網站應用程式追蹤使用者所在的地理定位資訊，就可以看到瀏覽器上顯示目前的資訊，瀏覽器網址列的右方會出現一個類似雷達的小圖示，請參考圖3所示：
圖 3：瀏覽器上顯示使用者目前的資訊。
同樣地，若使用Firefox瀏覽器來測試，一樣會詢問使用者是否授權透露目前所在的地理定位資訊，請參考圖4所示：
圖 4：Firefox瀏覽器提示是否透露地理地位資訊。
Ie瀏覽器也有類似的訊息，請參考圖5所示：
圖 5 ：ie瀏覽器提示是否透露地理地位資訊。
進階的錯誤處理
透過HTML 5 Geolocation API取得使用者所在的地理資訊位置時，可能會發生多種不一樣的錯誤，若想要針對不同的錯誤情況來提供錯誤訊息給使用者，則可以利用code屬性，若code屬性值等於POSITION_UNAVAILABLE常值 (相當於數值1)，則代表目前無法判斷使用者所在的地理位置。若code屬性值等於PERMISSION_DENIED_TIMEOUT常值 (相當於數值3)，則代表超過逾期時間；若code屬性值等於PERMISSION_DENIED常值 (相當於數值1)，則代表使用者未授權存取。參考以下範例程式碼：
<!DOCTYPE html>
<html lang = "zh-tw" >
<head>
<title> Geolation </title>
<script type = "text/javascript" >
function successCallback( position ) {
var result = document.getElementById( 'result' );
result.innerHTML =
"緯度 : " + position.coords.latitude +
", 經度 : " + position.coords.longitude +
", 精確度 : " + position.coords.accuracy +
", 時間戳記 : " + position.timestamp ;
}
function errorCallback( error ) {
var msg = '';
switch ( error.code ) {
case error.POSITION_UNAVAILABLE:
msg = "無法取得目前POSITION";
break;
case error.PERMISSION_DENIED_TIMEOUT:
msg = "逾期!! ";
break;
case error.PERMISSION_DENIED:
msg = "使用者未授權!!";
break;
}
result.innerHTML = msg;
}
function contentLoaded () {
navigator.geolocation.getCurrentPosition( successCallback, errorCallback );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<div id = "result"> </div>
</body>
</html>
範例執行結果請參考圖6所示，若使用者在拒絕授權透漏使用者所在的地理定位資訊，就會看到以下錯誤訊息，而瀏覽器網址列類似小雷達的圖示旁會顯示一個「X」：
圖 6：進階的錯誤處理。
使用geolocation物件的watchPosition方法
geolocation物件的watchPosition方法可以持續地取得使用者所在的地理定位資訊，這對於移動中的行動裝置而言非常地方便。
呼叫watchPosition方法的參數和叫用getCurrentPosition方法一樣，第一個參數為成功取得地理定位資訊之後，想要執行的函式名稱，以本例而言為successCallback方法；第二個參數則是取得地理定位資訊失敗之後，想要執行的函數的名稱，以本例而言為errorCallback方法。第三個參數是一個PositionOption物件，可以設定查詢時額外的選項。
參考以下使用watchPosition方法的範例程式，startWatch方法中叫用geolocation物件的watchPosition方法來取得地理定位資訊，並透過PositionOption物件設定查詢選項：
- enableHighAccuracy：是一個布林值，預設值為false，指明您的應用程式是否要取得最精確的值。但不管這個布林值是否設為true，你的應用程式無法確保一定可以取得最精確的值。同時將這個值設定為true會讓取得地理定位資訊的速度變慢。若將這個值設定為false，則表示回應的速度之優先權會高於取得精確的結果。
- timeout：用來設定取得地理定位資訊的逾期時間，以毫秒計。若未在逾期時間內取得地理資訊，將會觸發error，然後執行您所指定的錯誤處理常式，以本例來說，就是errorCallback方法。若叫用watchPosition方法時未指定PositionOption物件，則永遠不逾期。若它的值為負數或0，則逾期時間將視為0。
- maximumAge：表示快取(Cache)的保存期限，以毫秒計。利用Cache可以提升應用程式的效能。
每回瀏覽器所在的行動裝置之位置變動時，將會觸發回呼函式。geolocation物件的watchPosition方法將會傳回一個ID以便於識別，如範例所示，當你叫用clearWatch方法時，便可以利用此ID來停止追蹤地理定位資訊。
<!DOCTYPE html>
<html lang = "zh-tw" >
<head>
<title> Geolation </title>
<script type = "text/javascript" >
var watchid = null;;
function startWatch () {
var setOptions = {
enableHighAccuracy : true,
timeout : 5000,
maximumAge : 50000
};
watchid = navigator.geolocation.watchPosition( successCallback, errorCallback, setOptions );
}
function stopWatch( ) {
if ( watchid != null ) {
navigator.geolocation.clearWatch( watchid );
watchid = null;
}
var result = document.getElementById( 'result' );
result.innerHTML = 'Stop';
}
function successCallback (position ) {
var result = document.getElementById( 'result' );
result.innerHTML =
"緯度 : " + position.coords.latitude +
", 經度 : " + position.coords.longitude +
", 精確度 : " + position.coords.accuracy +
", 時間戳記 : " + position.timestamp;
}
function errorCallback( error ) {
alert( '執行發生錯誤! 錯誤代碼 :' + error.code + ', 錯誤訊息 :' + error.message );
}
function contentLoaded () {
document.getElementById( 'Button1').addEventListener( 'click', startWatch, false);
document.getElementById ('Button2').addEventListener( 'click', stopWatch, false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded, false );
</script>
</head>
<body>
<input id = "Button1" type = "button" value = "Watch Position" />
<input id = "Button2" type = "button" value = "Stop Watch" />
<div id = "result"></div>
</body>
</html>
此範例的執行結果請參考圖7所示：
圖 7：使用watchPosition方法定期追蹤使用者定位。
結合地圖資訊
HTML 5的Geoloaction API可以跟地圖做結合，利用地圖來顯示使用者所在位置。若要使用Google Map，選擇有兩種，一為使用Static Maps API 取得靜態地圖，文件請參考Google 網站，網址為：https://developers.google.com/maps/documentation/staticmaps/。第二種選擇是使用Google Maps Javascript API，透過JavaScript來取得地圖，參考文件位址在https://developers.google.com/maps/documentation/javascript/reference。
Static Maps API可以讓程式設計師在網頁之中內嵌「Google地圖」，撰寫JavaScript程式碼來載入。只要發出標準的 HTTP請求，並利用查詢字串設定查詢參數，就可以建立地圖，並傳回此地圖以顯示在網頁上。參考以下範例程式，使用以下URI位址「http://maps.google.com/maps/api/staticmap」來取得地圖：
<!DOCTYPE html>
<html lang = "zh-tw" >
<head>
<title> Geolation </title>
<script type = "text/javascript" charset = "utf-8">
function successCallback( position ) {
var result = document.getElementById( 'result' );
result.innerHTML =
"緯度 : " + position.coords.latitude +
", 經度 : " + position.coords.longitude +
", 精確度 : " + position.coords.accuracy +
", 時間戳記 : " + position.timestamp ;
var url = 'http://maps.google.com/maps/api/staticmap?center=' + position.coords.latitude + ',' + position.coords.longitude + '&sensor=false&zoom=14&size=320x240&markers=color:blue%7C' + position.coords.latitude + ',' + position.coords.longitude ;
var map = document.getElementById( 'map' );
map.innerHTML = '<img src="' + url + '">' ;
}
function errorCallback( error ) {
alert('執行發生錯誤! 錯誤代碼 :' + error.code + ', 錯誤訊息 :' + error.message );
}
function contentLoaded( ) {
if ( navigator.geolocation ) {
var setOptions = {
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, setOptions );
} else {
alert( "你的瀏覽器不支援 geolocation!!" );
}
}
window.addEventListener( "DOMContentLoaded", contentLoaded, false );
</script>
</head>
<body>
<div id = "result"> </div>
<div id = "map"> </div>
</body>
</html>
在URI位置後方的查詢字串中，設定查詢參數如下：
- center：代表地圖的中心點，以本例來說，即為使用者所在的經、緯度的地理資訊位置。
- sensor：指明是否使用sensor(例如GPS定位儀)來取得地理定位資訊。
- zoom：要檢視的地圖縮放比率。它的值可以是0到21+。若指定的zoom值沒有辦法取得對應的圖檔，就會回傳空白的圖片來取代。
- size：定義地圖圖檔的大小，以本例來說為320 * 240 Pixel。
- markers：定義大頭針，color用來設定大頭針的顏色，其後是大頭針出現的位置，以本例來說就是地圖的中心點。
範例中利用<img>標記來顯示取得的圖片，參考執行結果如下圖所示：
圖 8：結合Google Static Map API取得地圖。
使用Google MAP API
最後我們來看一下使用Google MAP API透過JavaScript程式存取地圖的範例，此範例利用http://maps.google.com/maps/api/js URI來存取地圖。
<!DOCTYPE html>
<html >
<head>
<title> Geolation </title>
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javascript" charset = "utf-8" >
function successCallback( position ) {
var result = document.getElementById( 'result' );
result.innerHTML =
"緯度 : " + position.coords.latitude +
", 經度 : " + position.coords.longitude +
", 精確度 : " + position.coords.accuracy +
", 時間戳記 : " + position.timestamp ;
var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
var setOptions = {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( document.getElementById( "map_canvas"), setOptions );
map.setCenter( latLng );
var maker = new google.maps.Marker ( {
position: latLng,
map: map,
title: "你的位置"
}) ;
maker.setPosition( latLng );
}
function errorCallback( error ) {
alert('執行發生錯誤! 錯誤代碼 :' + error.code + ', 錯誤訊息 :' + error.message );
}
function contentLoaded( ) {
if ( navigator.geolocation ) {
var setOptions = {
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, setOptions );
} else {
alert("你的瀏覽器不支援 geolocation!!" );
}
}
window.addEventListener( "DOMContentLoaded", contentLoaded, false );
</script>
</head>
<body>
<div id = "result"> </div>
<div id = "map_canvas" style = "width:400px;height: 400px"> </div>
</body>
</html>
google.maps.LatLng物件代表地理坐標上面的一個點，包含經度與緯度。範例中將HTML 5 Geolocation API取回的經、緯度資料來取得使用者所在位置的地理坐標點。
google.maps.Map物件代表一張地圖，建立Map物件時建構函式的第一個參數代表要存放地圖的HTML Container，通常是一個div項目；第二個參數是一個google.maps.MapOptions物件，用來設定取得地圖的額外選項。範例中設定了以下選項：
- zoom：指明想要檢視的圖型放大比例。
- center：定義地圖的中心點。
- mapTypeId：地圖的類型。
範例中建立了google.maps.Marker物件來設定大頭針：
- position：大頭針的位置，以本例而言，便是使用者所在的位置。
- map：要顯示大頭針的地圖。
- title：大頭針的文字說明。
此範例執行的結果請參考圖9所示。
圖 9：使用Google Map API，利用JavaScript取回地圖。
總結
HTML 5 Geolocation API能夠透過瀏覽器來取得使用者所在的地理定位資訊，利用地理地位資訊，我們可以結合地圖資訊系統到應用程式之中，這對行動裝置來說是相當有用的。
訂閱