1)使用地理定位:
透過navigator.geolocation存取地理定位功能,傳回一個Geolocation物件;
## 1.1)Geolocation物件成員:
getCurrent#Position
(call##back, errorCallback,options)——取得目前位置;
watchPosition(callback,error,options)-開始監控目前位置; ## clearWatch(id)-停止監控目前位置;
1.1.1)瀏覽器呼叫getCurrentPosition的callback函數的當參數時,會傳入一個提供位置細節的position物件;
position物件成員:
## coords-回到目前位置的座標,即Coordinates物件;
time
##H之一之一stamp-傳回取得座標資訊的時間;
Coordinates物件成員:
############################### ######### latitude-返回十進位表示的緯度;######################### lon####git######### lon####git######### lon####git######### #ude-傳回以十進位表示的經度;######################## altitude-以米表示的海拔高度傳回;#### #################### accuracy-傳回以公尺表示的座標精確度;################### ##### altitudeAccuracy-返回以公尺表示的海拔精確度;####################### ###head###返回以度表示的行進方向;######################### speed-傳回以公尺/秒錶示的行進速度;##### ###################2)處理地理定位錯誤:############getCurrentPosition(callback,errorCallback,options)方法的第二個參數,它讓我們可以指定一個函數,在獲 取位置發生錯誤時呼叫它。此函數會獲得一個PositionError物件;
PositionError物件成員:
code-傳回代表錯誤類型的程式碼;
=1-使用者未經授權使用地理定位功能;
## =2-無法確定位置;
=3-請求位置的嘗試已逾時;
message-傳回描述錯誤的字串;
#3)指定地理定位選項:
getCurrentPosition(callback,errorCallback,options)方法提供的第三個參數是一個PositionOptions物件。
# PositionOptions物件的成員:
#################################################################################### ###### enableHighAccuracy-告訴瀏覽器我們希望得到可能的最佳結果;######################### timeout-限制請求位置的事件,設定多少毫秒後會報告一個逾時錯誤;
## maximumAge-告訴瀏覽器我們願意接受快取過的位置,只要它不早於指定的毫秒數;
4)監控位置:
watchPosition方法不斷獲得關於位置的更新。所需參數與getCurrentPosition方法相同,運作方式也一樣。
# 差異在於:隨著位置改變,回呼函數會被重複地呼叫。 #
######## ######################
table{ border-collapse: collapse; } th,td{ padding: 4px; } th{ text-align: right; }
<table border="1"> <tr> <th>经度:</th><td id="longitude">-</td> <th>纬度:</th><td id="latitude">-</td> </tr> <tr> <th>海拔高度:</th><td id="altitude">-</td> <th>坐标精度:</th><td id="accuracy">-</td> </tr> <tr> <th>海拔精度:</th><td id="altitudeAccuracy">-</td> <th>行进方向:</th><td id="heading">-</td> </tr> <tr> <th>速度:</th><td id="speed">-</td> <th>时间:</th><td id="timestamp">-</td> </tr> <tr> <th>错误类型:</th><td id="errcode">-</td> <th>错误信息</th><td id="errormessage">-</td> </tr> </table><pre name="code" class="html"> <button id="pressme">Cancel Watch</button>
var options={ enableHighAccuracy:false, timeout:2000, maximumAge:30000 } var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options) document.getElementById("pressme").onclick=function(e){ navigator.geolocation.clearWatch(WatchID); } function displayPosition(pos){ var properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"]; for(var i=0;i<properties.length;i++){ var value=pos.coords[properties[i]]; document.getElementById(properties[i]).innerHTML=value; } document.getElementById("timestamp").innerHTML=pos.timestamp; } function handleError(err){ document.getElementById("errcode").innerHTML=err.code; document.getElementById("errmessage").innerHTML=err.message; }
以上是html5之使用地理定位的程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!