讓我們來做個互動天氣地圖吧!(直播筆記) | html天氣
這次的直播要做一個互動地圖,當滑鼠滑過的時候顯示當地天氣資訊!這次的直播內容主要有幾個部分:取得地圖的svg的檔案,並修改成我們可以用的檔案類型。取得台灣的地圖資料,包含行政區域名稱與代號,並把資料對應到地圖上。做出互動的頁面,包含滑鼠滑過時的移動、變色,還有右側的資料顯示。筆記會著重在3.程式實作的部分,並把相關的資料與圖片連同程式碼一起放在github上面,供大家參考💻。要跟著影片一起做也沒問題:程式實作主要會用到的工具與知識:HTML,CSS與JavaScript的基礎觀念svg的基本操作Vue.js框架的操作使用axios串接...
這次的直播要做一個互動地圖,當滑鼠滑過的時候顯示當地天氣資訊!
這次的直播內容主要有幾個部分:
取得地圖的 svg 的檔案,並修改成我們可以用的檔案類型。取得台灣的地圖資料,包含行政區域名稱與代號,並把資料對應到地圖上。做出互動的頁面,包含滑鼠滑過時的移動、變色,還有右側的資料顯示。筆記會著重在 3. 程式實作的部分,並把相關的資料與圖片連同程式碼一起放在 github 上面,供大家參考💻。
要跟著影片一起做也沒問題:
程式實作
主要會用到的工具與知識:
HTML, CSS 與 JavaScript 的基礎觀念svg 的基本操作Vue.js 框架的操作使用 axios 串接中央氣象局 open data API讀取地圖,並操作樣式要在我們的頁面讀取 svg 有幾種方法,使用 <img> tag 讀取檔案,或是直接把 <svg> 包覆的內容直接貼在 html 裡面,但是如果直接讀取檔案的話就沒有辦法對 svg 進行操作,所以我們選擇後者。
svg 檔案的格式跟 html 很像,都是一層一層的往下排列,不過相對於 html 裡面的內容是 <html> 包覆所有物件,svg 則是在 <svg> 包覆繪圖軟體裡面使用的「群組」<g>、「路徑」<path> 、「線段」<line> 或是 <ploygon>、<circle> 圖形等元件。
讀進 svg 的 html 大概會長這樣:
<html> <head> ... </head> <body> <svg data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 841.89"> <defs /> <title> image.svg </tit...取得本站獨家住宿推薦 15%OFF 訂房優惠
中央氣象局鄉鎮預報 今天天氣 明天天氣 天氣預報台南 氣象雲圖 一週天氣 台中天氣 天氣地圖 天氣html碼 千樺花園餐廳婚禮 世貿咖啡館 香菇王ptt 心的種子住宿 悅榕汽車旅館鬧鬼 提 拉 米 蘇 舒芙蕾 台灣大廚桌菜 台大醫院附近美食餐廳 liberty錢幣 Wyndham career
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
1週預報 | html天氣
06/29 星期二; 白天 多雲 31 - 33 88 - 91; 晚上 多雲 28 - 31 82 - 88. 06/30 星期三; 白天 多雲 28 - 33 82 - 91; 晚上 多雲 27 - 31 81 - 88. 07/01 星期四; 白天 多雲時晴 ... Read More
天氣概況 | html天氣
6月13日14時天氣概況:. 一、天氣特報:請參照本局發布之最新豪(大)雨特報。 二、編號第2104 ... Read More
天氣資訊圖片HTML 碼及預覽 | html天氣
天氣資訊圖片HTML 碼及預覽. <a href=https://tcwis.com/ target=_blank><img src= ... Read More
建立一個即時天氣App - 前置準備 | html天氣
[Day 13 - 即時天氣] 建立一個即時天氣App - 前置準備. 從Hooks 開始,讓你的網頁React 起來系列第13 篇. pjchender. 2 年前‧ 4266 瀏覽. 6. 感謝iT 邦幫忙與博碩 ... Read More
最新天氣 | html天氣
最新天氣. 自110年1月1日起,本局局屬氣象站正式啟用地面氣候自動觀測系統(除蘇澳、板橋及玉山3站外),詳細說明請參考附檔。看更多. 自110年1月1日起, ... Read More
縣市預報 | html天氣
天氣. 縣市預報. 選擇縣市, 總覽, 基隆市, 臺北市, 新北市, 桃園市, 新竹市, 新竹縣, 苗栗縣, 臺中市, 彰化縣, 南投縣, 雲林縣, 嘉義市, 嘉義縣, 臺南市, 高雄市, 屏東縣, 宜蘭 ... Read More
臺南市 | html天氣
臺南市,縣市預報,縣市,預報,天氣,氣象,一周天氣預報,一周預報,7天預報,今明天氣預報,今明預報,36小時預報,溫度,降雨機率,體感溫度,紫外線,日出日沒,月出月沒,天氣 ... Read More
讓我們來做個互動天氣地圖吧!(直播筆記) | html天氣
HTML, CSS 與JavaScript 的基礎觀念; svg 的基本操作; Vue.js 框架的操作; 使用axios 串接中央氣象局open data API. 讀取地圖,並 ... Read More
鄉鎮預報 | html天氣
天氣狀況; 風力風向; 相對濕度. 一週; 逐三小時. 四 ... Read More
首頁 | html天氣
註:使用手機裝置瀏覽本局網頁之用戶才會有此功能,若您使用電腦裝置瀏覽本局網頁,則不會看到切換模式之選項。 關閉. ::: 導覽 | 科普網 | 常見問答 | 雙語 ... Read More
訂房住宿優惠推薦