HTML5 Geolocation（地理定位）

HTML5 Geolocation API用于獲得用戶的地理位置。

注意：鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，在使用該功能的時(shí)候?yàn)g覽器會(huì)彈出提醒框。

一、地理定位的幾種方式

IP地址、GPS、Wifi、GSM/CDMA

二、地理位置獲取流程

1、用戶打開需要獲取地理位置的web應(yīng)用。

2、應(yīng)用向?yàn)g覽器請求地理位置，瀏覽器彈出詢問，詢問用戶是否共享地理位置。

3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。

4、瀏覽器將相關(guān)信息發(fā)送到一個(gè)信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。

三、瀏覽器的支持

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

注釋：對于擁有 GPS 的設(shè)備，比如 iPhone（IPhone3.0+、Android2.0+），地理定位更加精確。

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

GeolocationAPI存在于navigator對象中，只包含3個(gè)方法：

1、getCurrentPosition //當(dāng)前位置

2、watchPosition //監(jiān)視位置

3、clearWatch //清除監(jiān)視

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</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>經(jīng)度: " + position.coords.longitude;
  }
</script>
</body>
</html>

實(shí)例解析:

檢測是否支持地理定位

如果支持，則運(yùn)行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。

如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對象

showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

處理錯(cuò)誤和拒絕

getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)：

function showError(error)
{
    switch(error.code)
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="用戶拒絕對獲取地理位置的請求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="請求用戶地理位置超時(shí)。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知錯(cuò)誤。"
            break;
    }
}

getCurrentPosition()方法 — 返回?cái)?shù)據(jù)

若獲取位置成功，則 getCurrentPosition() 方法返回對象。始終會(huì)返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會(huì)返回其他下面的屬性。

屬性描述

coords.latitude 十進(jìn)制數(shù)的緯度

coords.longitude 十進(jìn)制數(shù)的經(jīng)度

coords.accuracy 位置精度

coords.altitude 海拔，海平面以上以米計(jì)

coords.altitudeAccuracy 位置的海拔精度

coords.heading 方向，從正北開始以度計(jì)

coords.speed 速度，以米/每秒計(jì)

timestamp 響應(yīng)的日期/時(shí)間

還可以獲得地理位置（只有firefox支持)

p.address.country 國家

p.address.region 省份

p.address.city 城市

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>基于瀏覽器的HTML5查找地理位置</title>  <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 } } //成功時(shí) function onSuccess(position){ //返回用戶位置 //經(jīng)度 var longitude =position.coords.longitude; //緯度 var latitude = position.coords.latitude; //使用百度地圖API //創(chuàng)建地圖實(shí)例 var map =new BMap.Map("container"); //創(chuàng)建一個(gè)坐標(biāo) var point =new BMap.Point(longitude,latitude); //地圖初始化，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別 map.centerAndZoom(point,15); } //失敗時(shí) function onError(error){ switch(error.code){ case 1: alert("位置服務(wù)被拒絕"); break; case 2: alert("暫時(shí)獲取不到位置信息"); break; case 3: alert("獲取信息超時(shí)"); break; case 4: alert("未知錯(cuò)誤"); break; } } window.onload=getLocation; </script> </head> <body>  <div id="container" style="width:600px;height:600px"></div> </body> </html>

einreichen Code zurücksetzen

Automatische Operation