首頁 > web前端 > H5教程 > 主體

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

WBOY
發布: 2016-05-16 15:50:11
原創
2359 人瀏覽過

本小菜剛開始學習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取得地理位置信息,以相容於較早不支援的瀏覽器。

複製程式碼
程式碼如下:
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);


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



複製程式碼程式碼如下:





取得目前位置並顯示在google地圖上








相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板