這篇文章主要是想記錄這次「2020 口罩存貨實時地圖」的開發過程。從 2/6 衛服部健保署釋出 API ,趕緊串接資料釋出簡易的存貨熱點,到今天開發告一段落,這中間從摸索地圖資料、理解 JavaScript ES6 的 Promise 等等,著實學到蠻多東西,也順便複習原生的 JS 語法。

目前開發成果如下圖,作品請參考連結,開源程式碼請詳見 GitHub ,更多資訊可查詢口罩供需資訊平台

2020 口罩存貨實時地圖

本文主要紀錄以下幾個技術面向:

  1. 使用 leaflet.jsOpenStreetMap 搭建地圖資料
  2. 透過 JavaScript ES6 Promise 語法串接 API
  3. 使用 Leaflet.markercluster 群集化資料
  4. 縣市/鄉鎮市區/關鍵字篩選功能實作
  5. 透過 Geolocation 取得使用者的位置資訊
  6. 收藏功能實作

好,我們開始吧!

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×