html5中获取地理位置信息,HTML5 獲取地理位置信息

HTML5增加的新功能,獲取地理位置信息,如果瀏覽器支持且設備有定位功能,就能夠直接使用這組API來獲取當前信息位置。該Geolocation API可以應用於移動設備中的地理位置。

Geolocation API的基礎知識

在HTML5中,為window.navigator對象新增了一個geolocaation屬性,可以使用Geolocation API來對該屬性進行訪問。window.navigator對象的geolocation屬性存在以下三個方法。

1 .取得當前地理位置 getCurrentPositon(onsuccess,onError,options)

其中第一個參數為獲取當前地理位置信息成功時所執行的回調函數,第二個參數為獲取當前地理位置信        息失敗時所執行的回調函數,第三個參數為一些可選屬性的列表。其中第二,第三個參數為可選屬性。

1.1 getCurrentPosition方法中的第一個參數為獲取當前地理位置信息成功時所執行的回調函數。該參數的        使用方法如下。在獲取地理位置信息成功時執行的回調函數中,用到了一個參數position,它代表一個position對象。

navigator.geolocation.getCurrentPosition(function(position){

//獲取成功時的處理

})

1.2 getCurrentPosition方法中的第二個參數為獲取當前地理位置信息失敗時所執行的回調函數。該回調函        數使用一個error對象作為參考,該對象具有以下兩個屬性:

code屬性:用戶拒絕了位置服務(屬性值為1)

獲取不到位置信息(屬性值為2)

獲取信息超時錯誤(屬性值為3)

message屬性:message屬性為一個字符串,在該字符串中包含了錯誤信息,這個錯誤在開發和調試時              將很有用。

在getCurrentPosition方法中使用第二個參數來捕獲錯誤信息的具體使用方法如下:

1 navigator.geolocation.getCurrentPosition(function(position){2 var coords =position.coords;3 showMap(coords.latitude,coords.longitude,coords.accuracy);4 },5 //捕獲錯誤信息

6 function(error){7 var errorTypes ={8 1:'位置服務被拒絕',9 2:'獲取不到位置信息',10 3:'獲取信息超時',11 };12 alert(errorTypes[error.code] + ": 不能確定你的當前地理位置");13 }14 )

1.3 getCurrentPosition方法中的第三個參數可以省略,它是一些可選屬性的列表,這些可選屬性如下:

enableHighAccuracy:是否要求高精度的地理位置信息

timeout:對地理位置信息的獲取操作做一個超時限制(單位為毫秒)

maximumAge:對地理位置信息進行緩存的有效時間(單位為毫秒)

對於這些可選屬性的具體位置方法如下:

1 navigator.geolocation.getCurrentPositon(function(position){2 },3 function(error){4 },5 //以下為可選屬性

6 {7 //設置緩存有效時間為2分鍾

8 maximumAge:60*1000*2,9 //5秒鍾內未獲取到地理位置信息則返回錯誤

10 timeout:5000

11 )

2.持續監視當前地理位置的信息 watchCurrentPositon(onsuccess,onError,options)

該方法三個參數的說明與使用方法和getCurrentPosition方法的參數說明與使用方法相同。該方法返回一個數字,這個數字的使用方法與Javascript腳本中setInterval方法的返回參數的使用方法類似,可以被clearWath方法使用,停止對當前地理位置信息的監視。

3.停止獲取當前用戶的地理位置信息 clearWatch(watchId)

使用該方法可以停止對當前用戶的地理信息的監視。該方法的參數為調用watchCurrentPosition方法監視地理位置信息時的返回參數。

position對象

如果獲取地理位置信息成功,則可以在獲取成功后的回調函數中通過訪問position對象的屬性來得到這些地理位置信息。position對象具有如下這些屬性:

latitude:當前地理位置的緯度。

longitude:當前地理位置的經度。

altitude:當前地理位置的海拔高度(不能獲取時為null)

accuracy:獲取到的緯度或經度的精度

altitudeAccuracy:獲取到的海拔高度的精度

heading:設備的前進方面。用面朝正北方向的順時針旋轉角度來表示(不能獲取時為null)

speed:設備的前進速度

timestamp:獲取地理位置信息時的時間。

下面用getCurrentPositon方法獲取當前位置的地理信息

1 functionshowObject(obj, k) {2 //遞歸顯示object

3 if (!obj) {4 return;5 }6 for (var i inobj) {7 if (typeof(obj[i]) != "object" || obj[i] == null) {8 for (var j = 0; j < k; j++){9 document.write('    ');10 }11 document.write(i + " : " + obj[i] + "
");12 } else{13 document.write(i + " : " + "
");14 showObject(obj[i],k+1);15 }16 }17 }18 functionget_location(){19 if(navigator.geolocation){20 navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000})21 } else{22 alert('你的瀏覽器不支持使用HTML 5來獲取地理位置信息。');23 }24 }25

26 functionhandle_error(err){27 //錯誤處理

28 switch(err.code){29 case 1:30 alert('位置服務被拒絕');31 break;32 case 2:33 alert('暫時獲取不到位置信息');34 break;35 case 3:36 alert('獲取信息超時');37 break;38 default:39 alert('未知錯誤');40 break;41 }42 }43

44 functionshow_map(position){45 //顯示地理信息

46 var latitude =position.coords.latitude;47 var longititude =position.coords.longititude;48 showObject(position,0);49 }50

51 get_location();

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值