本小菜剛開始學習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）；
- 獲取不到位置信息（屬性值為2）；
- 獲取信息超時錯誤（屬性值為3）。
- message：字符串，包含了具體的錯誤信息。
在options參數中，可選屬性如下：
- enableHighAccuracy：是否要求高精度的地理位置信息。
- timeout：設置超時時間（單位為毫秒）。
- maximumAge：對地理位置信息進行緩存的有效時間（單位為毫秒）。
其中注意要寫上如下代碼，判斷瀏覽器是否支持HTML5獲取地理位置信息，以兼容較早不支持的瀏覽器。
if (navigator.geolocation) { //獲取當前地理位置信息 navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } else { alert("你的瀏覽器不支持HTML5來獲取地理位置信息。"); }
2.調用Google Map API獲取當前位置信息
首先，需要在頁面中引用Google Map API的腳本文件，導入方法如下所示。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
其次，設定地圖參數，設定方法如下所示。
//指定一個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);
最后的最后，獻上本次示例所有代碼。代碼如下所示。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲取當前位置並顯示在google地圖上</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function init() { if (navigator.geolocation) { //獲取當前地理位置 navigator.geolocation.getCurrentPosition(function (position) { var coords = position.coords; //console.log(position); //指定一個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); //在地圖上創建標記 var marker = new google.maps.Marker({ position: latlng, //將前面設定的坐標標注出來 map: map //將該標注設置在剛才創建的map中 }); //標注提示窗口 var infoWindow = new google.maps.InfoWindow({ content: "當前位置：<br/>經度：" + latlng.lat() + "<br/>維度：" + latlng.lng() //提示窗體內的提示信息 }); //打開提示窗口 infoWindow.open(map, marker); }, function (error) { //處理錯誤 switch (error.code) { case 1: alert("位置服務被拒絕。"); break; case 2: alert("暫時獲取不到位置信息。"); break; case 3: alert("獲取信息超時。"); break; default: alert("未知錯誤。"); break; } }); } else { alert("你的瀏覽器不支持HTML5來獲取地理位置信息。"); } } </script> </head> <body onload="init()"> <div id="map" style="width: 800px; height: 600px"></div> </body> </html>
| 作 者：D.J. Chan 出 處：http://www.cnblogs.com/djchan/ 歡迎任何形式的轉載，但請務必注明出處。 |