利用HTML5中Geolocation取得地理位置呼叫Google Map API在Google Map上定位_html5教學技巧

本小菜剛開始學習HTML5，現在對其中的Geolocation頗感興趣，結合Google Map的API實現基本的地圖定位功能。
1.取得目前地理位置
呼叫方法 void getCurrentPosition(onSuccess, onError, options);即可。
其中onSuccess是取得目前位置資訊成功時執行的回呼函數，onError是取得目前位置資訊失敗時所執行的回呼函數，options是一些可選熟悉清單。其中第二和第三個參數為可選屬性。
在onSuccess回呼函數中，用到了參數position，代表一個具體的position對象，表示目前位置。其具有以下屬性：
•latitude：目前地理位置的緯度。
•longitude：目前地理位置的經度。
•altitude：目前位置的海拔高度（無法取得時為null）。
•accuracy：所獲得的緯度和經度的精確度（以公尺為單位）。
•altitudeAccurancy：取得的海拔高度的經度（以公尺為單位）。
•heading：設備的前進方向。以面向正被方向的順時針旋轉角度來表示（不能取得時為null）。
•speed：設備的前進速度（以公尺/秒為單位，無法取得時為null）。
•timestamp：取得地理位置資訊時的時間。

在onError回呼函數中，用到了error參數。其具有以下屬性：
•code：錯誤代碼，有以下值。
1.使用者拒絕了位置服務（屬性值為1）；
2. 取得不到位置資訊（屬性值為2）；
3.取得資訊逾時錯誤（屬性值為3）。
•message：字串，包含了具體的錯誤訊息。

在options參數中，可選屬性如下：
•enableHighAccuracy：是否要求高精度的地理位置資訊。
•timeout：設定超時時間（單位為毫秒）。
•maximumAge：地理位置資訊快取的有效時間（單位為毫秒）。
其中註意要寫上如下程式碼，判斷瀏覽器是否支援HTML5取得地理位置信息，以相容於較早不支援的瀏覽器。

複製程式碼

程式碼如下:

if (igator.ge.ge >//取得目前地理位置資訊
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("你的瀏覽器不支援HTML5來取得地理位置資訊。" );
}

2.呼叫Google Map API取得目前位置資訊
首先，需要在頁面中引用Google Map API的腳本文件，導入方法如下圖所示。

複製程式碼程式碼如下:

其次，設定地圖參數，設定方法如下所示。

複製程式碼程式碼如下:

//google點，同時指定該座標點的橫座標和縱座標

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, / /設定放大倍率
center: latlng, //將地圖中心點設定為指定的座標點
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖型別
};


最後，創建地圖，並在頁面中顯示，創建方法如下所示

複製代碼程式碼如下:

//建立地圖，並在頁面map中顯示

var map = new google.maps.Map(document.getElementById("map"), myOptions);


最後的最後，獻上本次範例所有程式碼。程式碼如下所示。

複製程式碼程式碼如下: