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