讓我們來做個互動天氣地圖吧!(直播筆記) | vue台灣地圖
![讓我們來做個互動天氣地圖吧!(直播筆記)](https://i.imgur.com/axBPWDg.jpg)
這次的直播要做一個互動地圖,當滑鼠滑過的時候顯示當地天氣資訊!這次的直播內容主要有幾個部分:取得地圖的svg的檔案,並修改成我們可以用的檔案類型。取得台灣的地圖資料,包含行政區域名稱與代號,並把資料對應到地圖上。做出互動的頁面,包含滑鼠滑過時的移動、變色,還有右側的資料顯示。筆記會著重在3.程式實作的部分,並把相關的資料與圖片連同程式碼一起放在github上面,供大家參考💻。要跟著影片一起做也沒問題:程式實作主要會用到的工具與知識:HTML,CSS與JavaScript的基礎觀念svg的基本操作Vue.js框架的操作使用axios串接...
![讓我們來做個互動天氣地圖吧!(直播筆記)](http://pix4.agoda.net/hotelimages/agoda-homes/5899847/61e1a790eeb181e40e8f262ea5a396dc.jpg?s=800x)
這次的直播要做一個互動地圖,當滑鼠滑過的時候顯示當地天氣資訊!
這次的直播內容主要有幾個部分:
取得地圖的 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 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
D3.js、Vue 畫一個台灣地圖 | vue台灣地圖
2019年10月5日 — 本篇大綱:畫一個台灣地圖需要很多資源的幫忙、畫台灣地圖步驟、下載縣市界線經緯度、SHP轉檔GeoJSON、製作頁面、HTML、引用d3.js、d3.js append svg ... Read More
D3、Vue 畫一個台灣地圖 | vue台灣地圖
D3、Vue 畫一個台灣地圖. Contribute to letswritetw/letswrite-taiwan-map-basic development by creating an account on GitHub. Read More
d3、vue 畫一個台灣地圖 | vue台灣地圖
縣市中文. 縣市英文. GitHub 留言板 · 午餐吃什麼 · 套件集合站 · 台灣地圖 · 手風琴 · Map縮網址 · Telegram 登入 · 找圖片裡的顏色 · 表單驗證. © 2023 Let's Write. Read More
d3、vue 畫一個台灣地圖- Front | vue台灣地圖
台灣地圖svg,大家都在找解答。跳到d3.js append svg path - 為了把GeoJSON裡的路徑變成可以投影成地圖的路徑,必須要... 可以開始用d3抓GeoJSON進來,然後把路徑寫 ... Read More
Let's Write - https:letswrite.twd3-vue-taiwan | vue台灣地圖
https://letswrite.tw/d3-vue-taiwan-map/ 本篇大綱: - 畫一個台灣地圖需要很多資源的幫忙-畫台灣地圖步驟- 下載縣市界線經緯度- SHP轉檔GeoJSON - 製作頁面-- HTML ... Read More
letswritetwletswrite-taiwan-map | vue台灣地圖
D3、Vue 畫一個台灣地圖. Contribute to letswritetw/letswrite-taiwan-map-basic development by creating an account on GitHub. Read More
Vue.js 新手如何製作口罩地圖?一起來貢獻小小力量吧! | vue台灣地圖
2020年4月17日 — 最近世界各地疫情嚴峻,筆者以口罩地圖作為Vue.js 練習主題的主因在於, ... 選單的選項需分別列出台灣所有的縣市/地區供使用者選擇,但我們不太可能 ... Read More
[ D3.js ] 繪製臺灣地圖 | vue台灣地圖
小白也能輕鬆瞭解的Vue.js 與D3.js 。 系列第30 篇 ... 我們首先到臺灣政府資料開放平臺 的網站中下載以縣市為界的台灣地圖SHP 檔案: Read More
[筆記] 從零接觸Google Map API:在Vue.js 中實作地圖、地標 | vue台灣地圖
2019年10月10日 — 透過Google Map API 在Vue.js 專案中建立地圖、地標、訊息視窗 — 實作展示各行政區數間餐廳. Read More
台灣天氣地圖 | vue台灣地圖
台灣天氣地圖-Vue.js與svg圖片應用 · hsimao. Follow. Love View in EditorSign UpLog In · Edit Pen. Taiwan Weather Map. __browser:device:unknown ... Read More
讓我們來做個互動天氣地圖吧!(直播筆記) | vue台灣地圖
2020年3月28日 — 取得台灣的地圖資料,包含行政區域名稱與代號,並把資料對應到地圖上。 ... HTML, CSS 與JavaScript 的基礎觀念; svg 的基本操作; Vue.js 框架的操作 ... Read More
讓我們來做個互動天氣地圖吧!(直播筆記) | vue台灣地圖
取得台灣的地圖資料,包含行政區域名稱與代號,並把資料對應到地圖上。 ... HTML, CSS 與JavaScript 的基礎觀念; svg 的基本操作; Vue.js 框架的操作 ... Read More
訂房住宿優惠推薦
![](https://i.imgur.com/axBPWDg.jpg)