實作振興三倍券地圖 使用原生JS、axios、leaflet、OSM

首先，三倍券地圖的網址在此。

終於做好了

前陣子因應疫情的關係，有大量的前端夥伴製作口罩地圖，但是我參加了六角學院切版直播班的緣故，沒有投入口罩地圖的製作。
結果就在前幾天，無聊的我到政府資料開放平台隨意瀏覽，居然發現了振興三倍券庫存量的api，心血來潮的我便投入製作三倍券地圖。

時間不多，目標是在7/15號前製作好地圖，扣掉輪深夜勤務的日子，大概只剩下一天半的時間可以製作。
以下是我的製作過程，有參考Albert與Luffy兩位大大的部落格。

首先，先設定好開發環境，基本上直接沿用我在切版直播班使用的，gulp+ejs+BS4，再加上leaflet與axios。

ejs模板語言

然後是簡單的HTML結構

整體排版用上了BS4的格線系統，在切版直播班練到爛掉的東西...
基本的樣式都是用BS4元件與class完成，css部分寫得不多。
再來就是JS的部分：

設定leaflet與OSM圖資

接下來的部分都是在axios抓到api資料後才運行：

第一個我想處理GPS定位，參考了Luffy大大的作法。
除了載入網頁會先定位一次，我還想加入手動按按鈕定位的功能，因為我挺懶的，所以沒有額外設定leaflet的icon，而是直接用material-icon做一個，再監聽它。

好用的forEach

再過來，把axios抓到的res.data用forEach歷遍，判斷三倍券存量為0的顯示紅色icon，其餘的顯示藍色icon。
還有使用markerclusterGroup這個插件，讓圖標可以群組化，節省效能。

設定一下popUp的樣式與資訊內容

然後要製作一個連動式下拉選單，第一個選縣市，第二個選鄉鎮。
使用了這個API。

這邊卡了2小時之久，最後用很奇耙的方式做出來....

做好下拉選單後，接著抓取下拉選單的value，回到data內搜尋同地區的郵局，再用forEach組字串顯示在畫面上：

再加上個人覺得很重要的功能，點選表單某間郵局，地圖會自動飛到該郵局的地點。

想要的功能差不多都做完了。

做到這邊大致完工，後面只剩下完成css樣式，還有加上手機版nav的收合：

最後的小功能用jQuery來寫。

大功告成，前後大約花了8小時左右完成了這個地圖，雖然畫面不炫炮，至少基本的功能都有。

最後附上Github網址。