當前位置 : IT培訓網 > Web前端 > Web教程 > 如何使用HTML5 Geolocation

如何使用HTML5 Geolocation

時間:2016-12-07 13:29:45??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
利用HTML5實現定位方面的知識點就介紹到這里了,如果你在學習這方面的或者即將打算學習,那么趕緊來與小編互動吧,讓小編告訴你HTML5里的功能有多強大。

如何在網頁中定位呢,很多不懂網頁制作的小盆友覺得很神奇,一個網頁就可以實現定位了,功能太強大了。其實地理定位只是網頁設計中基本的功能,凡是學習者都會接觸到這方面知識,下面就隨著IT培訓網小編一起來看看如何定位吧?

HTML5 Geolocation(地理定位)

HTML5 Geolocation(地理定位)用于定位用戶的位置。

定位用戶的位置

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

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

瀏覽器支持

如何使用HTML5 Geolocation_www.oalvodamoda.com

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

注意: Geolocation(地理定位)對于擁有 GPS 的設備,比如 iPhone,地理定位更加精確。

HTML5 - 使用地理定位

請使用 getCurrentPosition() 方法來獲得用戶的位置。

下例是一個簡單的地理定位實例,可返回用戶位置的經度和緯度:

實例

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;    

}

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</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)

    {

        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;

    }

}

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</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,showError);

         }

         else

         {

                   x.innerHTML="該瀏覽器不支持定位。";

         }

}

function showPosition(position)

{

         x.innerHTML="緯度: " + position.coords.latitude +

         "<br>經度: " + 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 - 操作超時

在地圖中顯示結果

如需在地圖中顯示結果,您需要訪問可使用經緯度的地圖服務,比如谷歌地圖或百度地圖:

實例

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+"'>";

}

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<p id="demo">點擊按鈕獲取您當前坐標(可能需要比較長的時間獲取):</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>

運行結果:

點擊按鈕獲取您當前坐標(可能需要比較長的時間獲取):

暫不顯示,自行測試

在上例中,我們使用返回的經緯度數據在谷歌地圖中顯示位置(使用靜態圖像)。

Google地圖腳本

上面的鏈接向您演示如何使用腳本來顯示帶有標記、縮放和拖曳選項的交互式地圖。

給定位置的信息

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

實例:

更新本地信息

顯示用戶周圍的興趣點

交互式車載導航系統 (GPS)

getCurrentPosition() 方法 - 返回數據

T若成功,則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用,則會返回其他下面的屬性。

屬性

描述

coords.latitude

十進制數的緯度

coords.longitude

十進制數的經度

coords.accuracy

位置精度

coords.altitude

海拔,海平面以上以米計

coords.altitudeAccuracy

位置的海拔精度

coords.heading

方向,從正北開始以度計

coords.speed

速度,以米/每秒計

timestamp

響應的日期/時間

Geolocation 對象 - 其他有趣的方法

watchPosition() - 返回用戶的當前位置,并繼續返回用戶移動時的更新位置(就像汽車上的 GPS)。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一臺精確的 GPS 設備來測試該例(比如 iPhone):

實例

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>經度: " + position.coords.longitude;

}

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<p id="demo">點擊按鈕獲取您當前坐標(可能需要比較長的時間獲取):</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>經度: " + position.coords.longitude;     

}

</script>

</body>

</html>

運行結果:

點擊按鈕獲取您當前坐標(可能需要比較長的時間獲取):

暫不顯示,自行測試

利用HTML5實現定位方面的知識點就介紹到這里了,如果你在學習這方面的或者即將打算學習,那么趕緊來與小編互動吧,讓小編告訴你HTML5里的功能有多強大。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天