HTML5 基礎(chǔ)教程

HTML5 API

HTML5 媒體

HTML5 圖形

HTML5 Video(視頻)HTML5 拖放

HTML5 地理定位

HTML5 Geolocation（地理定位）用于定位用戶的位置。

定位用戶的位置

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

鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

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

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

HTML5 - 使用地理定位

請(qǐng)使用 getCurrentPosition() 方法來(lái)獲得用戶的位置。

下例是一個(gè)簡(jiǎn)單的地理定位示例，可返回用戶位置的經(jīng)度和緯度:

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</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>

測(cè)試看看 ?/?

示例解析:

檢測(cè)是否支持地理定位
如果支持，則運(yùn)行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。
如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中指定的函數(shù)返回一個(gè)coordinates對(duì)象
showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

上面的示例是一個(gè)非常基礎(chǔ)的地理定位腳本，不含錯(cuò)誤處理。

處理錯(cuò)誤和拒絕

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

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基礎(chǔ)教程(cainiaoplus.com)</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,showError);
    }
    else
    {
        x.innerHTML="該瀏覽器不支持定位。";
    }
}
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>

測(cè)試看看 ?/?

錯(cuò)誤代碼：

Permission denied - 用戶不允許地理定位
Position unavailable - 無(wú)法獲取當(dāng)前位置
Timeout - 操作超時(shí)

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

如需在地圖中顯示結(jié)果，您需要訪問可使用經(jīng)緯度的地圖服務(wù)，比如谷歌地圖或百度地圖：

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基礎(chǔ)教程(cainiaoplus.com)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲取）：</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>

測(cè)試看看 ?/?

在上例中，我們使用返回的經(jīng)緯度數(shù)據(jù)在谷歌地圖中顯示位置（使用靜態(tài)圖像）。

Google地圖腳本
上面的鏈接向您演示如何使用腳本來(lái)顯示帶有標(biāo)記、縮放和拖曳選項(xiàng)的交互式地圖。

給定位置的信息

本頁(yè)演示的是如何在地圖上顯示用戶的位置。不過，地理定位對(duì)于給定位置的信息同樣很有用處。

示例:

更新本地信息
顯示用戶周圍的興趣點(diǎn)
交互式車載導(dǎo)航系統(tǒng) (GPS)

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

T若成功，則 getCurrentPosition() 方法返回對(duì)象。始終會(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í)間

Geolocation 對(duì)象 - 其他有趣的方法

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

clearWatch() - 停止 watchPosition() 方法

下面的示例展示 watchPosition() 方法。您需要一臺(tái)精確的 GPS 設(shè)備來(lái)測(cè)試該例（比如 iPhone）：

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基礎(chǔ)教程(cainiaoplus.com)</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>

測(cè)試看看 ?/?

HTML5 Video(視頻)HTML5 拖放