使用地理位置資訊API取得當前經緯度 - 昕力資訊

本文介紹如何使用javascript Geolocation API 來取得使用者的地理位置資訊. ... 透過以上地理位置資訊API的介紹與教學，相信使用起來會非常簡單，. 當您輸入電子信箱、訂閱本公司之「電子報」時，我們會向您蒐集、處理、利用的個資為您的「電子信箱」以及「提交日期」，當您輸入電子信箱並送出時，即表示您同意我們使用您的個資，為保障您的權益，關於更多相關政策更新資訊，請務必閱讀我們的「隱私權政策」、「使用條款」及「免責聲明」。

如您不同意本網站之「隱私權政策」、「使用條款」及「免責聲明」，您可以隨時「取消訂閱」，謝謝您。

關閉 取消訂閱昕力資訊電子報 取消訂閱 關閉 關閉 是否確定取消註冊？將會永久刪除您在本站的帳號與資訊。

確定 取消 公告系統 × 目前無公告 首頁 網頁技術 javascript 使用地理位置資訊API取得當前經緯度 javascript 使用地理位置資訊API取得當前經緯度 莊君威 2019/08/0509:00:00 0 3647   前言 透過瀏覽器內的javascript地理位置資訊API來獲取詳細地理資訊， Geolocation物件定義了三個方法getCurrentPosition()、 watchPosition()、clearWatch()     開發環境 JDK8 HTML5 jQuery2.1.4 TOMCAT8 Eclipse   1. 檢查是否支援 GeolocationAPI是透過navigator.geolocation物件所發布， 首先，要檢查你的瀏覽器是否支援地理位置資訊API，可先測試地理 位置定位是否存在：         對於判斷是否存在，主要就是看navigator.geolocation這個物件， 使用in而不是單純使用if(navigator.geolocation)，因為使用後者 可能會初始化地理位置資訊，因而佔用資源。

  2. 取得目前位置 若要取得使用者當前位置，可呼叫getCurrentPosition() 方法，     一但呼叫了這個方法，瀏覽器會先詢問使用者是否允許程式獲取地理位 置資訊：          點擊允許獲取使用者位置後，就可以開始讀取地理資訊，此時會返回一個 Position物件，位置資訊則包含在此物件的coords屬性中，詳細內容 如下：   Position物件屬性 內容 coords Coordinates座標物件，存放傳回之位置資訊 timestamp 取得位置資訊的時間（毫秒） coords.latitude 緯度（degree） coords.longitude 經度（degree） coords.altitude 海拔高度（meter）若裝置不支援則回傳0 coords.accuracy 位置的精確度範圍（meter） coords.altitudeAccuracy 海拔精確度範圍（meter）若裝置不支援則回傳0 coords.heading 當前移動的方向（degree） coords.speed 裝置的移動速度（m/s）   取得當前經緯度的範例結果如下：     3. 觀看目前位置 若使用者的定位資訊持續改變，可使用watchPosition()方法來觀看使用 者的位置：     此時會回傳一組id；若要停止觀看使用者的位置，可以使用clearWatch()  方法：     4. 錯誤回報 而當呼叫 getCurrentPosition()及 watchPosition()時， 若發生錯誤，根據回傳的code代碼可分為以下幾種狀態：       UNKNOW_ERROR：不明原因錯誤 PERMISSION_DENIED：使用者拒絕位置服務，或瀏覽器設 定不允許使用位置服務 POSITION_UNAVAILABLE：無法取得位置資訊(ex.連線中斷) TIMEOUT：逾時仍未回傳   瀏覽器相容性 Chrome IE Safari Firefox Opera 5 9 5 3.5 16     透過以上地理位置資訊API的介紹與教學，相信使用起來會非常簡單， 以目前網頁程式的開發來說，對於取得使用者的地理資訊算是相當普遍 ，尤其現在手持裝置居多，這項功能就顯得相當重要，像是可以提供距 離計算的服務，或是可以依照不同使用者位於不同的地區，設計出來的 功能會有不一樣的使用者體驗。

  0 點數申請 文章標題 : 使用地理位置資訊API取得當前經緯度 申請項目 : 檔案上傳 請選擇審查人員 暫存 確認 莊君威 相關文章 Async/awaithell Javascript的深淺拷貝 零延遲setTimeout(fn,0)的應用 JavaScript可選鏈運算符(?.)與空值合併運算符(??)介紹 javascriptES5之後實用語法 運用ThreeJS貼圖材質特性，將電影平面海報視覺3D化 最新文章 大話CleanSwift-觀念篇 如何在Vue使用TinyMCE(SelfHosted) CSS：GlassBackground毛玻璃特效 我把CSS變成Photoshop了！我跟mix-blend-mode有點熟 如何使用OverflowTool製作UserFlow?（下） Thymeleaf&資料傳遞 最熱門文章 同作者文章 確定 取消 × 登入