您好,登錄后才能下訂單哦!
HTML5的強大,無需我過多的介紹,其中Geolocation地理定位是HTML5的重要特性之一。使用這個特性我們就可以開發出基于地理位置信息的應用。例如你要實現查詢用戶周邊酒店、加油站等功能時,你可以調用百度地圖、高德地圖、google地圖等接口,然后根據用戶的具體地理坐標位置等信息來搜尋周邊事物。
當然,每個人的地理位置信息是屬于他個人的隱私。所以一般游覽器都會先詢問用戶是否愿意,如果用戶拒絕的話,則用戶位置信息是不可用的。
廢話不多說,直接上代碼:
<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 | 響應的日期/時間 |
嗯~是不是有點屌?但是你有沒發現,這種定位并不是實時的。如果用戶使用的是移動端,并且他在移動中,那坐標也必須跟隨著在不停的改變中,而之前獲得的坐標還有毛用啊!呵呵,莫慌!屌炸天的Geolocation對象,有個牛逼的方法:
watchPosition() - 返回用戶的當前位置,并繼續返回用戶移動時的更新位置。
clearWatch() - 停止 watchPosition() 方法。
如果你有臺愛瘋(iphone)之類精確的GPS設備,那就更是如虎添翼了。
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
可以用手機或ipad去測試下,看看是否能實時定位。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。