透過Vue建立健保特約機構家用快篩試劑查詢網站-Day1

功能規劃及Layout設計

Posted by     "Brady Yang" on Sunday, July 31, 2022

前陣子因為疫情的關係口罩地圖及快篩地圖提供了民眾便利的查詢系統。因此,我希望練習幾個常用的地圖設計,並透過Vue來建立此系統。

Layout

以下為我的Layout設計,我希望提供簡單直覺的畫面供使用者查詢。 首先,將畫面切割成三塊,分別為Header、Main及Footer。

  • Header:呈現Logo、系統名稱及Navigation Bar。
  • Main:透過地圖呈現販賣快篩診所資訊及剩餘數量。
  • Footer:呈現版權、聯絡資訊等。

資料來源

透過政府資料開放平台 提供的API。

常用的地圖設計

這邊針對幾個大家常用的開發方式進行練習,分別有

  • OpenLayers
  • Leaflet
  • GoogleMap

總結

今天先大致設計出我們要呈現的畫面,接著就是要開始動手實作了。