JavaScript30-Geolocation-21

結果好好的休息了好一陣子，一整年過去了，在跨年的時候終於沒有兩年前那種不知道人生方向的感覺，整個心裡踏實了好多，知道自己要的是什麼，也在寫年度review的時候發現自己真的變得更不一樣，好好回顧自己一整年的每一天在幹嘛，也回去看了看去年自己寫的年度reveiw，那時候自己覺得自己寫的很好，但現在回去看感覺就像一個菜鳥一樣。

這一整年下來得到了很多人的讚美，也慢慢調整自己的心情，以前常常對自己生氣，覺得為什麼我會做錯事情，但現在好好想想之後發現，可能是我自己真的不過好，真心建議大家有空可以找一年來寫寫看一整年都做了什麼事情。

每一次都會發現自己變得不一樣的地方，給自己一點期許，盡力去完成，就算最後沒有完成了，有設定目標的人，也會比沒有設定目標的人走得更前面。

以前想要條列式的舉出一點自己做過的事情，好像就真的列出來而已，但不了解你的人根本不知道你背後做這樣事情，付出了多少努力，唯有真的好好的品味生活的人才可以清楚的說出，每一次挑戰背後得到的東西，與過程中的辛酸快樂。

很開心今年又跟大家一起倒數，也很開心在張開眼後醒來看到最美的夢想，我想我會永遠記得這個不一樣的元旦。

一切都不一樣了，掰2020，
目前人生最有收穫的一年。
嗨2021，為開張眼後的夢想努力的一年。

21 Geolocation

主題

利用navigator.geolocation來取得裝置的地理位置與速率。

步驟

Step1. 啟動Local Server

這個練習需要使用到local server，
如果你已經有一個可在本機run起來的server可以直接使用，
或在這層資料夾底下運行npm install來安裝browser-sync，
安裝完成後可以透過指令npm start來啟動localserver(預設port3000)，

npm指令需要下載node.js來使用

Step2. 測試

由於這個練習是需要取得定位資訊，
所以可以透過手機瀏覽器利用npm start啟動server後的內網ip來連線，
或是使用Mac的Xcode開發工具來模擬移動中的裝置(影片教學是使用後者)。

Step3. 撰寫程式

// 取得HTML中的元素
const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');
// 使用watchPosition來取得使用者的地理位置及海拔、速度
navigator.geolocation.watchPosition((data) => {
  // 若成功取回，則會回傳一組Position(這裡定義名稱為data)
  console.log(data);
  // 使用coords.speed取回速度(公尺/秒)
  speed.textContent = data.coords.speed;
  // 使用coords.heading取得方位，代表偏離北方的角度，0為正北、90為正東
  arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (err) => {
  // 錯誤回傳訊息，例如未取得定位授權時
  console.error(err);
});

參閱：MDN-Geolocation

[DEMO]