HTML5 Geolocation(地理定位)簡介
導讀 | HTML5 Geolocation(地理定位)用於定位使用者的位置。 |
HTML5 Geolocation API 用於獲得使用者的地理位置。
鑑於該特性可能侵犯使用者的隱私,除非使用者同意,否則使用者位置資訊是不可用的。
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支援Geolocation(地理定位).
注意: Geolocation(地理定位)對於擁有 GPS 的裝置,比如 iPhone,地理定位更加精確。
請使用 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 + " 經度: " + position.coords.longitude; }
例項解析:
- 檢測是否支援地理定位
- 如果支援,則執行 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; } }
錯誤程式碼:
- Permission denied - 使用者不允許地理定位
- Position unavailable - 無法獲取當前位置
- Timeout - 操作超時
如需在地圖中顯示結果,您需要訪問可使用經緯度的地圖服務,比如谷歌地圖或百度地圖:
例項
function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
在上例中,我們使用返回的經緯度資料在谷歌地圖中顯示位置(使用靜態影像)。
Google地圖
上面的連結向您演示如何使用指令碼來顯示帶有標記、縮放和拖曳選項的互動式地圖。
本頁演示的是如何在地圖上顯示使用者的位置。不過,地理定位對於給定位置的資訊同樣很有用處。
可用於:
- 更新本地資訊
- 顯示使用者周圍的興趣點
- 互動式車載導航系統(GPS)
T若成功,則 getCurrentPosition() 方法返回物件。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用,則會返回其他下面的屬性。
屬性 | 描述 |
---|---|
coords.latitude | 十進位制數的緯度 |
coords.longitude | 十進位制數的經度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米計 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,從正北開始以度計 |
coords.speed | 速度,以米/每秒計 |
timestamp | 響應的日期/時間 |
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 + " 經度: " + position.coords.longitude; }
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2924716/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- HTML5地理定位-Geolocation APIHTMLAPI
- Xamarin Essentials教程地理定位Geolocation
- 基於HTML5的移動Web應用——Geolocation地理定位HTMLWeb
- HTML5 Geolocation學習HTML
- 你有了解HTML5的地理定位嗎?怎麼使用?HTML
- HTML5簡介HTML
- HTML5 Web Workers簡介HTMLWeb
- 簡單介紹HTML5 LandmarkHTML
- HTML5 Audio(音訊)簡介HTML音訊
- 根據IP定位地理位置
- 用HTML5 Geolocation實現一個距離追蹤器HTML
- Blazor Bootstrap 元件庫地理定位/移動距離追蹤元件介紹Blazorboot元件
- HTML5 Web SQL 資料庫簡介HTMLWebSQL資料庫
- HTML5 應用程式快取簡介HTML快取
- HTML5語音合成Speech Synthesis API簡介HTMLAPI
- 地生中考簡記(地理部分)
- HTML5獲取圖片的原始高度簡單介紹HTML
- HTML 統一資源定位器(Uniform Resource Locators)簡介HTMLORM
- 谷歌瀏覽器模擬地理定位和裝置方向谷歌瀏覽器
- 《HTML5移動網站與App開發實戰》簡介HTML網站APP
- Redis 地理空間(geospatial)介紹及應用Redis
- 從html5的新特性定位安全問題HTML
- 簡單而清楚地理解閉包
- HTML5培訓教程:HTML5基礎介紹HTML
- [Ionic 2從入門到精通] 6.5 接入Google Maps和地理定位Go
- 簡單介紹recorder.js 基於Html5錄音功能的實現JSHTML
- popup定位引擎popper.js介紹JS
- 前端【小程式】14-小程式基礎篇【地理位置】【騰訊定位服務】前端
- 定位精準,輕鬆管理:HoudahGeo 6 for Mac 地理位置資訊完美解決方案Mac
- 簡介
- 如何最簡單、通俗地理解GPT的Transformer架構?GPTORM架構
- Jira使用簡介 HP ALM使用簡介
- E108-GN系列GNSS多模衛星導航定位模組產品簡介
- HTML5 之瀏覽器支援介紹HTML瀏覽器
- HTML5的基本入門格式介紹HTML
- 如何透過華為定位API精準獲取使用者所在地理位置?API
- GeoPackage - 一個簡便輕量的本地地理資料庫Package資料庫
- BookKeeper 介紹(1)--簡介