💡
HTML5
  • HTML5
  • 1. 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
    • 1.3 環境準備
  • 2. HTML5 元素
    • 2.1 語意結構標籤
    • 2.2 input 標籤的類型與屬性
    • 2.3 media 相關標籤
    • 2.4 圖形相關標籤
  • 3. History
    • 3.1 API 及相關說明
    • 3.2 練習
  • 4. Web Storage
    • 4.1 localStorage 與 sessionStorage 簡介
    • 4.2 資料儲存
    • 4.3 資料擷取
    • 4.4 資料更新
    • 4.5 資料刪除
    • 4.6 練習
  • 5. Fullscreen
    • 5.1 API 及相關說明
  • 6. File
    • 6.1 基本使用
    • 6.2 解析 CSV
  • 7. Drag and Drop
    • 7.1 簡介及主要事件說明
    • 7.2 練習 - 拖曳元素
    • 7.3 練習 - 其它事件
  • 8. Geolocation
    • 8.1 簡介
    • 8.2 相關 API 及範例
  • 9. Web Workers
    • 9.1 簡介
    • 9.2 Dedicated Worker
  • 10. 作業
  • 11. 參考資料
Powered by GitBook
On this page
  • 1、隱私權的問題:需要使用者的同意
  • 2、準確度的問題:不保證一定正確
  • 3、安全性的問題:有些瀏覽器限定要 https 加密傳輸協定
  1. 8. Geolocation

8.1 簡介

Previous8. GeolocationNext8.2 相關 API 及範例

Last updated 1 year ago

透過 HTML5 內建的 Geolocation API 取得使用者所在的位置。有幾點需要留意:

1、隱私權的問題:需要使用者的同意

如果你的某個頁面,需要取得使用者的位置,那就會跳如下視窗,詢問使用者是否同意:

這無法透過程式去關閉這提醒視窗。需要使用者自行從瀏覽器的偏好設定中去關閉,例:

第一步:

第二步:

第三步:

通常也不太需要去改。只要使用者同意過 1、2 次之後,有些瀏覽器器就不會再跳提醒的通知。

2、準確度的問題:不保證一定正確

通常依照準確度由高至低來分:GPS定位 → Wi-Fi 三角測量 → 基地台三角測量 → IP 定位(可能定到機房去了……)。

3、安全性的問題:有些瀏覽器限定要 https 加密傳輸協定

Geolocation API Removed from Unsecured Origins in Chrome 50.

Location is sensitive data! Requiring HTTPS is required to protect the privacy of your users' location data. If the user's location is available from a non-secure context, attackers on the network will be able to know where that user is. This seriously compromises user privacy.

也就是從 Chrome 50 版本之後開始,限定要使用加密傳輸協定( https ),才能夠使用 Geolocation API,否則會失效。 在上述的參考文件當中,有提到 localhost 的部份,不需要 https 也可以取得資料。

參考:

https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only