使用HTML5实现地理位置定位
生活随笔
收集整理的這篇文章主要介紹了
使用HTML5实现地理位置定位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5 Geolocation（地理定位）用于定位用戶的位置。
定位用戶的位置HTML5 Geolocation API 用于獲得用戶的地理位置。鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。瀏覽器支持Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。注釋：對于擁有 GPS 的設備，比如 iPhone，地理定位更加精確。
使用地理定位簡單例子請使用 getCurrentPosition() 方法來獲得用戶的位置。下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。實例<script>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>
例子解釋：1.檢測是否支持地理定位2.如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。3.如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象showPosition() 函數獲得并顯示經度和緯度
上面的例子是一個非常基礎的地理定位腳本，不含錯誤處理。
含處理錯誤和拒絕的例子getCurrentPosition() 方法的第二個參數用于處理錯誤。它規定當獲取用戶位置失敗時運行的函數：實例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;}}
錯誤代碼解釋：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><body><p id="demo">點擊這個按鈕，獲得您的位置：</p><button οnclick="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="Geolocation is not supported by this browser.";}}
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="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>
getCurrentPosition() 方法及其它屬性?若成功，則 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）：<!DOCTYPE html><html><body><p id="demo">點擊這個按鈕，獲得您的坐標：</p><button οnclick="getLocation()">試一下</button><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></body></html>
定位用戶的位置HTML5 Geolocation API 用于獲得用戶的地理位置。鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。瀏覽器支持Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。注釋：對于擁有 GPS 的設備，比如 iPhone，地理定位更加精確。
使用地理定位簡單例子請使用 getCurrentPosition() 方法來獲得用戶的位置。下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。實例<script>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>
例子解釋：1.檢測是否支持地理定位2.如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。3.如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象showPosition() 函數獲得并顯示經度和緯度
上面的例子是一個非常基礎的地理定位腳本，不含錯誤處理。
含處理錯誤和拒絕的例子getCurrentPosition() 方法的第二個參數用于處理錯誤。它規定當獲取用戶位置失敗時運行的函數：實例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;}}
錯誤代碼解釋：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><body><p id="demo">點擊這個按鈕，獲得您的位置：</p><button οnclick="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="Geolocation is not supported by this browser.";}}
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="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>
getCurrentPosition() 方法及其它屬性?若成功，則 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）：<!DOCTYPE html><html><body><p id="demo">點擊這個按鈕，獲得您的坐標：</p><button οnclick="getLocation()">試一下</button><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></body></html>
總結
以上是生活随笔為你收集整理的使用HTML5实现地理位置定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Html5中新增的表单元素详解
- 下一篇： CSS清除行内元素之间的HTML空白