2024 iThome 鐵人賽

DAY 22

JavaScript

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列第 22 篇

Day22】21 - Geolocation

16th鐵人賽 javascript30 javascript基礎概念實作 navigator.geolocation

Hazel

2024-08-22 07:12:25

463 瀏覽

分享至

主題

實作一個顯示當前方位與速度的工具。

成果

完整程式碼
Demo效果

實作重點

Javascript

可以搭配文件 (MDN)
這個題目在手機上比較好看到效果，使用 Mac 用戶可以下載 Xcode 去設定模擬。
安裝/啟動
1. 利用npm來安裝：npm i
2. 開啟：npm start
取得元素
1. 方向：arrow, 速度：speed

取得位置，console 出來看看

navigator.geolocation.watchPosition((data) => {
  console.log(data);
})

再把取到的資料賦予上去就可以了

額外知識

取得位置

getCurrenPosition : 只回傳一個座標，適合第一次要鎖定位置然後給不同資料的情境
watchPosition : 如果有變動位置就給座標，適合行進間的情境

【Day21】20 - Speech Detection

【Day23】22 - Follow Along Link Highlighter

系列文

AI 時代，基礎要有：JavaScript30 打下紮實基礎共 31 篇

RSS系列文訂閱系列文

9 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19792 篇

完賽人數

529 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙

AI 時代，基礎要有：JavaScript30 打下紮實基礎系列 第 22 篇