歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 地理位置定位(HTML5 Geolocation)

HTML5 地理位置定位(HTML5 Geolocation)

日期:2017/3/1 9:41:56   编辑:Linux編程

HTML5的強大,無需我過多的介紹,其中Geolocation地理定位是HTML5的重要特性之一。使用這個特性我們就可以開發出基於地理位置信息的應用。例如你要實現查詢用戶周邊酒店、加油站等功能時,你可以調用百度地圖、高德地圖、google地圖等接口,然後根據用戶的具體地理坐標位置等信息來搜尋周邊事物。

當然,每個人的地理位置信息是屬於他個人的隱私。所以一般游覽器都會先詢問用戶是否願意,如果用戶拒絕的話,則用戶位置信息是不可用的。

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm


廢話不多說,直接上代碼:

<script>

var x=document.getElementById("demo");

functiongetLocation()

{

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

functionshowPosition(position)

{

x.innerHTML="Latitude: "+ position.coords.latitude +

"<br />Longitude: "+ position.coords.longitude;

}

</script>


以上是沒有報錯信息處理的代碼。如果未能顯示出緯度(Latitude)、經度(Longitude)信息的話,那你就得檢查下游覽器是否支持地理定位。

(1)如果支持,則運行 getCurrentPosition() 方法。如果不支持,則向用戶顯示一段消息。

(2)如果getCurrentPosition()運行成功,則向參數showPosition中規定的函數返回一個coordinates對象。showPosition() 函數則是獲得並顯示經度和緯度。

當然我們也可以有處理錯誤的功能反饋給用戶:

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED://用戶不允許地理定位

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE://無法獲取當前位置

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT://操作超時

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR://未知錯誤

x.innerHTML="An unknown error occurred."

break;

}

}


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

navigator.geolocation.getCurrentPosition(showPosition,showError);

嗯,這樣你就可以獲得了用戶的地理位置坐標信息。其實最重要的無非就是上面的那行代碼,和獲取坐標的兩個方法:

position.coords.latitude//緯度

position.coords.longitude//經度

就醬紫了?不,它還能獲得些呢,客觀別急,接著往下看。

getCurrentPosition()--返回數據:

屬性 描述 coords.latitude 十進制數的緯度 coords.longitude 十進制數的經度 coords.accuracy 位置精度 coords.altitude 海拔,海平面以上以米計 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向,從正北開始以度計 coords.speed 速度,以米/每秒計 timestamp 響應的日期/時間

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-07/104530p2.htm

Copyright © Linux教程網 All Rights Reserved