HTML5 Geolocati...LOGIN

HTML5 Geolocation(地理定位)

HTML5 Geolocation API用於獲得使用者的地理位置。

注意:鑑於該特性可能會侵犯使用者的隱私,除非使用者同意,否則使用者位置資訊是不可用的,在使用該功能的時候瀏覽器會彈出提醒框。


#一、地理定位的幾種方式

#IP位址、GPS、Wifi、GSM/CDMA

二、地理位置取得流程

1、使用者開啟需要取得地理位置的web應用。

2、應用程式向瀏覽器要求地理位置,瀏覽器彈出詢問,詢問使用者是否共用地理位置。

3、假設使用者允許,瀏覽器從設別查詢相關資訊。

4、瀏覽器將相關資訊傳送到一個信任的位置伺服器,伺服器傳回具體的地理位置。

三、瀏覽器的支援

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6 + 支援地理定位。

註解:對於擁有 GPS 的設備,例如 iPhone(IPhone3.0+、Android2.0+),地理定位更精確。

四、HTML5中地理位置定位的方法

#GeolocationAPI存在於navigator物件中,只包含3個方法:

1、getCurrentPosition //目前位置

2、watchPosition //監視位置

3、clearWatch //清除監視

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

實例解析:

偵測是否支援地理定位

如果支持,則執行getCurrentPosition() 方法。如果不支持,則向使用者顯示一段訊息。

如果getCurrentPosition()運作成功,則向參數showPosition中規定的函數傳回coordinates物件

showPosition() 函數取得並顯示經度和緯度

處理錯誤和拒絕

getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當取得使用者位置失敗時運行的函數:

function showError(error) 

    switch(error.code) 
    { 
       x.innerHTML="用戶拒絕對獲取地理位置的請求。 #            break; 
#        case error.TIMEOUT: 
          .innerHTML="請求使用者地理位置逾時。" 
            break; 
        case 
            break; 
    } 
}




getCurrentPosition()方法— 傳回資料

若取得位置成功,則getCurrentPosition() 方法返回對象。總是會傳回 latitude、longitude 以及 accuracy 屬性。如果可用,則會傳回其他下面的屬性。

物件#coords.longitude    十進位數的經度   
coords.accuracy    位置精確度   

coords.altitude    海拔,海平面以上以米計的位置尺寸海拔精準度   coords.heading    方向,從正北方開始以度計   coords.speed    速度,以公尺/時計   

 ## 反應


##還可以取得地理位置(只有firefox支援)

#p.address.country 國家

p.address.region 省

p.address.city 城市

下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>基于浏览器的HTML5查找地理位置</title> <!-- 百度API --> <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script> function getLocation(){ var options={ enableHighAccuracy:true, maximumAge:1000 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //浏览器不支持geolocation } } //成功时 function onSuccess(position){ //返回用户位置 //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; //使用百度地图API //创建地图实例 var map =new BMap.Map("container"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化,设置中心点坐标和地图级别 map.centerAndZoom(point,15); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } } window.onload=getLocation; </script> </head> <body> <!-- 结果会显示位置服务被拒绝 --> <div id="container" style="width:600px;height:600px"></div> </body> </html>
章節課件