iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0

Day21-課題內容

在今天的課題當中,我們要透過 Geolocation API,取得我們目前位置的經緯度。[1]
實作連結-大家可以把得到的經緯度貼在 google map 上,會發現十分的精準喔!

Geolocation

Web Apps 若需要使用者的位置,可透過 Geolocation API 取得相關資訊。而基於隱私權的考量,這些 Web Apps 均必須取得使用者的許可之後,才能發佈位置資訊。
Geolocation API 為 Web Apps 的 API 之一,其可透過 navigator.geolocation 物件取得使用者的位置的相關資訊。[2]

Geolocation Method

  1. getCurrentPosition():透過此方法可以取得目前位置。
    當成功取得位置後,會回傳一包含位置資訊的物件,並隨即執行特定的回呼常式。
  2. watchPosition():追蹤目前位置。
    此方法會持續追蹤在定位資料,當此資料改變時,會回傳一包含位置資訊的物件,並隨即執行特定的回呼常式。

Geolocation Property

  1. coords.latitude:目前位置緯度。
  2. coords.longitude:目前位置經度。
  3. coords.accuracy:目前位置經準度(米)。
  4. coords.altitude:目前海拔高度(米)。
  5. coords.altitudeAccuracy:目前海拔精準度(米)。
  6. coords.heading:目前前進方向的角度,以北方為0度順時針計算。
  7. coords.speed:目前的速度(米/秒)。
  8. timestamp:回傳位置物件時的 Unix epoch time。

實作應用

透過 Geolocation API 的 getCurrentPosition() 物件,加上 coords.latitude 以及 coords.longitude 屬性,我們就能取得我們目前的經緯度。當我們點擊頁面上的按鈕,便執行 Geolocation API ,並取得我們所在位置資料的物件,透過取出經度與緯度的屬性,再將其指派為元素的 innerHTML,我們就能在頁面上印出我們的位置:

const text = document.querySelector('.position');
const button = document.querySelector('button');
    
function getPosition() {
    navigator.geolocation.getCurrentPosition(function (data) {
        let latitude = data.coords.latitude;
        let longitude = data.coords.longitude;
        console.log('緯度:',latitude);
        console.log('經度:',longitude);
        text.innerHTML = `緯度: ${latitude}<br>  經度: ${longitude}`;
      });
};
button.addEventListener('click', getPosition);

總結

這幾天的內容都是與 Web API 的相關內容,透過這些 API,我們可以取得很多本地端的資料,可以做出許多好玩的功能,不過在使用者遇到會用到這些個人資訊的網頁應用程式時,也要多加留意小心。以上是今天的內容,就讓我們開始倒數 JavaScript 30天吧!

參考資料

  1. javascript30
  2. 地理位置定位 (Geolocation)
  3. Geolocation API Specification

上一篇
JS30-Day20-Speech Detection
下一篇
JS30-Day22-Follow Along Nav
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言