HTML5 Geolocation（地理定位）

HTML5?Geolocation（地理定位）

#HTML5 Geolocation（地理定位）用於定位使用者的位置。

定位使用者的位置

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

鑑於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是不可用的。

瀏覽器支援

Internet Explorer 9+, Firefox, Chrome, Safari 和Opera 支援Geolocation（地理定位）.

注意:?Geolocation（地理定位）對(duì)於擁有GPS 的設(shè)備，例如iPhone，地理定位更加精確。

HTML5 - 使用地理定位

#請(qǐng)使用 getCurrentPosition() 方法來取得使用者的位置。

下例是一個(gè)簡(jiǎn)單的地理定位實(shí)例，可傳回使用者位置的經(jīng)度與緯度:

<!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)（可能需要比較長(zhǎng)的時(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>

執(zhí)行程式試試看

實(shí)例解析:

偵測(cè)是否支援地理定位

如果支持，則執(zhí)行g(shù)etCurrentPosition() 方法。如果不支持，則向使用者顯示一段訊息。

如果getCurrentPosition()運(yùn)作成功，則向參數(shù)showPosition中規(guī)定的函數(shù)傳回coordinates物件

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

上面的範(fàn)例是一個(gè)非?；A(chǔ)的地理定位腳本，不含錯(cuò)誤處理。

處理錯(cuò)誤和拒絕

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

<!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)（可能需要比較長(zhǎng)的時(shí)間獲取）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
        x.innerHTML="緯度: " + position.coords.latitude +
                "<br>經(jīng)度: " + position.coords.longitude;
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

運(yùn)行程式嘗試

#錯(cuò)誤代碼：

Permission denied -使用者不允許地理定位

Position unavailable - 無法取得目前位置

#Timeout - 操作逾時(shí)

##在地圖中顯示結(jié)果

如需在地圖中顯示結(jié)果，您需要存取可使用經(jīng)緯度的地圖服務(wù)，例如Google地圖或百度地圖：

<!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)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
    }
    function showPosition(position)
    {
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
                +latlon+"&zoom=14&size=400x300&sensor=false";
        document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

執(zhí)行程式嘗試

在上例中，我們使用傳回的經(jīng)緯度資料在Google地圖中顯示位置（使用靜態(tài)影像）。

實(shí)例

如

何使用Google地圖腳本來顯示帶有標(biāo)記、縮放和拖曳選項(xiàng)的互動(dòng)式地圖。

<!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)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
    }
    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='250px';
        mapholder.style.width='500px';
        var myOptions={
            center:latlon,zoom:14,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

執(zhí)行程式嘗試一下

#給定位置的資訊

本頁(yè)示範(fàn)的是如何在地圖上顯示使用者的位置。不過，地理定位對(duì)於給定位置的資訊同樣有用處。

實(shí)例:

更新本地資訊
#顯示使用者周圍的興趣點(diǎn)
#互動(dòng)式車載導(dǎo)航系統(tǒng)(GPS)

getCurrentPosition() 方法 - 傳回資料

若成功，則 getCurrentPosition() 方法傳回物件?？偸菚?huì)傳回 latitude、longitude 以及 accuracy 屬性。如果可用，則會(huì)傳回其他下面的屬性。

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

? ? ?	? ? ?#描述
coords.latitude	#十進(jìn)位數(shù)的緯度
coords.longitude	十進(jìn)位數(shù)的經(jīng)度
coords.accuracy	位置精確度

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計(jì)
coords.speed	速度，以米/每秒計(jì)
timestamp	回應(yīng)的日期/時(shí)間

#Geolocation 物件

watchPosition() -返回使用者的目前位置，並繼續(xù)返回使用者移動(dòng)時(shí)的更新位置（就像汽車上的GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的範(fàn)例展示 watchPosition() 方法。您需要一臺(tái)精確的 GPS 裝置來測(cè)試該範(fàn)例（例如 iPhone）：

<!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)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude + 
  "<br>經(jīng)度: " + position.coords.longitude;
  }
</script>
</body>
</html>

繼續(xù)學(xué)習(xí)

新建檔案

<!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)（可能需要比較長(zhǎng)的時(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>

提交重置程式碼

自動(dòng)運(yùn)行