口罩地圖

DEMO

https://albertnotes.github.io/F2E_maskMap/

功能

• 城市、地區選單選取
• 搜尋地址
• 即時定位
• 智能判別 icon
  • 藍色有尚有庫存
  • 紅色單一商品無庫存
  • 灰色全數商品無庫存
• 支援不同裝置瀏覽體驗

技術

• openstreetmap 圖資
• leaflet 框架
• leaflet markercluster 套件
• leaflet Locate 套件
• pug
• scss
• Parcel.js

安裝與運行

# 安裝 parcel
npm install -g parcel-bundler

# 執行
npm install
npm run start

# 其他指令
npm run build 生成 dist
npm run clean 清除 快取 與 dist

# 部屬 修改根目錄與專案資料夾相隔的資料夾
parcel build src/index.pug --public-url /F2E_maskMap/

聲明

• 設計稿來自 F2E 投稿設計師 - Wendy

筆記

• 本次專案過程收錄在 https://albertnotes.github.io/blog/javascript/2020/02/01/f2e-mask