HTML5 Geolocation（地理定位）

HTML5?Geolocation（地理定位）

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

定位使用者的位置

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

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

瀏覽器支援

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

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

HTML5 - 使用地理定位

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(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>經(jīng)度: " + position.coords.longitude;
    }
</script>
</body>
</html>

執(zhí)行程式試試看

實例解析:

偵測是否支援地理定位

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

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

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

上面的範例是一個非常基礎的地理定位腳本，不含錯誤處理。

處理錯誤和拒絕

#getCurrentPosition() 方法的第二個參數(shù)用於處理錯誤。它規(guī)定當獲取用戶位置失敗時運行的函數(shù)：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲?。?lt;/p>
<button onclick="getLocation()">點我</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="用戶拒絕對獲取地理位置的請求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請求用戶地理位置超時。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯誤。"
                break;
        }
    }
</script>
</body>
</html>

運行程式嘗試

#錯誤代碼：

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

Position unavailable - 無法取得目前位置

#Timeout - 操作逾時

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲?。?lt;/p>
<button onclick="getLocation()">點我</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="用戶拒絕對獲取地理位置的請求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請求用戶地理位置超時。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯誤。"
                break;
        }
    }
</script>
</body>
</html>

執(zhí)行程式嘗試

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

實例

如

何使用Google地圖腳本來顯示帶有標記、縮放和拖曳選項的互動式地圖。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲?。?lt;/p>
<button onclick="getLocation()">點我</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="用戶拒絕對獲取地理位置的請求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請求用戶地理位置超時。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯誤。"
                break;
        }
    }
</script>
</body>
</html>

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

#給定位置的資訊

本頁示範的是如何在地圖上顯示使用者的位置。不過，地理定位對於給定位置的資訊同樣有用處。

實例:

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

getCurrentPosition() 方法 - 傳回資料

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

##coords.altitude海拔，海平面以上以米計

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

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	回應的日期/時間

#Geolocation 物件

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

clearWatch() - 停止 watchPosition() 方法

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲?。?lt;/p>
<button onclick="getLocation()">點我</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ù)學習

新建檔案

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

提交重置程式碼

自動運行