081_html5地理定位
1. html5 Geolocation(地理定位)用于定位用戶的位置。
2. 定位用戶的位置
2.1. html5 Geolocation API用于獲得用戶的地理位置。
2.2. 鑒于該特性可能侵犯用戶的隱私, 除非用戶同意, 否則用戶位置信息是不可用的。
3. 瀏覽器支持
3.1. Internet Explorer 9+、Firefox、Chrome、Safari支持地理定位。
3.2. 對于擁有GPS的設備, 比如: iPhone, 地理定位更加精確。
4. html5使用地理定位
4.1. 請使用getCurrentPosition()方法來獲得用戶的位置。
4.2. 下例是一個簡單的地理定位實例, 可返回用戶位置的經度和緯度。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>獲取位置坐標</title></head><body><p id="demo">點擊這個按鈕, 獲得您的坐標:</p><button onclick="getLocation()">試一下</button><script type="text/javascript">var x=document.getElementById("demo");function getLocation() {if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(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></body> </html>4.3. 例子解釋:
?4.3.1. 檢測是否支持地理定位。
?4.3.2. 如果支持, 則運行getCurrentPosition()方法。如果不支持, 則向用戶顯示一段消息。
?4.3.3. 如果getCurrentPosition()運行成功, 則向參數showPosition中規定的函數返回一個coordinates對象。
?4.3.4. showPosition()函數獲得并顯示經度和緯度。
5. 處理錯誤和拒絕
5.1. getCurrentPosition()方法的第二個參數用于處理錯誤。它規定當獲取用戶位置失敗時運行的函數:
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>獲取位置坐標或錯誤</title></head><body><p id="demo">點擊這個按鈕, 獲得您的坐標:</p><button onclick="getLocation()">試一下</button><script type="text/javascript">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="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }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;}}</script></body> </html>5.2. 錯誤代碼:
?5.2.1. Permission denied: 用戶不允許地理定位。
?5.2.2. Position unavailable: 無法獲取當前位置。
?5.2.3. Timeout: 操作超時。
6. getCurrentPosition()方法: 返回數據
6.1. 若成功, 則getCurrentPosition()方法返回對象。始終會返回latitude、longitude以及accuracy屬性。如果可用, 則會返回其他下面的屬性。
7. Geolocation對象, 其他方法
7.1. watchPosition(): 返回用戶的當前位置, 并繼續返回用戶移動時的更新位置(就像汽車上的GPS)。
7.2. clearWatch(): 停止watchPosition()方法。
7.3. 下面的例子展示watchPosition()方法。您需要一臺精確的GPS設備來測試該例(比如: iPhone):
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>獲取位置坐標</title></head><body><p id="demo">點擊這個按鈕, 獲得您的坐標:</p><button onclick="getLocation()">試一下</button><script type="text/javascript">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></body> </html>總結
以上是生活随笔為你收集整理的081_html5地理定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 080_html5 Canvas和SVG
- 下一篇： 082_html5Web存储