實作口罩地圖後記與心得，開發口罩地圖並沒有想像中的簡單

不過政府對某些藥局的經緯度資料上有誤差，所以我自己也做了不少的修正。

以下提供我重新在Google Map 上查詢到的經緯度修正，若你在使用地圖時有 遇到藥局 ... 口罩地圖網址：https://kai-tw.github.io/Mask-Map/ 武漢肺炎日漸嚴重，台灣也出現了搶口罩的風潮（不是已經很久了嗎），而自從政府開始實施口罩配給後，哪個藥局還有庫存成了眾人最關心的議題。

所以，為了測試自己的程度，加入了製作口罩地圖的行列中！在此也要特別感謝kiang江明宗先生將藥局資料以及即時的口罩庫存做成geoJSON檔案提供，省去了不少處理資料的麻煩。

資料修正不過政府對某些藥局的經緯度資料上有誤差，所以我自己也做了不少的修正。

以下提供我重新在GoogleMap上查詢到的經緯度修正，若你在使用地圖時有遇到藥局座標錯誤，歡迎在下方留言板告訴我喔！ 醫事機構代碼醫事機構名稱經度,緯度 5931033130永利藥局121.517612,25.006090 5931033176緣來藥師藥局121.518552,25.007578 5931101455日揚藥局121.461145,25.136232 5931100092上全藥局121.461358,25.136273 這次採用Leaflet的JavaScript程式庫來顯示地圖，也因為是第一次使用Leaflet，開發時也遇到許多阻礙呢。

使用前因為沒有把Leaflet的文件完全看完，我也不知道Leaflet有提供geoJSONfunction可用，所以我傻傻的寫了個迴圈來逐一加點，而且事後才發現原來有geoJSON可以用。

Marker顏色辨別不過現在想想也沒關係，因為是自己用迴圈來拆解資料並逐一加入marker，所以對於每筆資料的條件判斷靈活性更高，可以達成逐一判別該marker應該用什麼樣子的icon來顯示。

這也是為什麼在我的口罩地圖中可以用顏色來分辨該藥局的口罩存量比例有多少。

在選擇顏色的時候我採用好想工作室的顏色分類，我想他們的顏色分類是最能分辨庫存數量的。

MarkerCluster原本以為這樣做就OK了，結果沒想到Leaflet的marker是利用一個DOMelement進行繪製的，意味著全台可供購買的藥局一共有6583間，所以就有快六千個DOMelement，而這六千個瀏覽器都要進行繪製，對於瀏覽器的負荷太高了，連電腦的瀏覽器都有效能上的問題更何況手機的瀏覽器。

為了解決這個問題我採用Leaflet一個plugin叫做markercluster。

markercluster可以有效的將附近的marker組合成一個marker，其中間的數字是用來表示該群組有幾個marker，而原先有將這個數字顯示出來，不過後來考慮到會跟口罩的數量起衝突（讓使用者以為有多少口罩在那裡）所以將他取消了。

MarkerCluster開發時為了讓你能快速分辨該Cluster的口罩庫存狀況，採用了收納Marker時順便抓取庫存狀態最高的作為該Cluster的顏色顯示。

最後利用不透明度來將庫存高的Cluster強調出來（實際上是將存量低的不透明度設低）。

每30秒自動更新每30秒自動更新也是頭痛的部分之一，因為每個marker的popup內容並不是以DOMelement方式儲存的，而是儲存在變數內，當使用者點擊marker時才會將內容加入頁面中。

所以自動更新時也花了不少的時間在了解LeafletMarkerCluster儲存資料的方式，慶幸的是，取用popup內容時是以資料型態為DOM的格式儲存，所以可以用JavaScript原生的方式存取該資料。

距離不知道有沒有人注意到每個藥局名稱旁都有顯示與目前位置的距離。

開發時，尋找距離公式時簡單，可是當將其寫成程式碼時又有遇到單位上的問題，所幸最後一一排除做出了理想的結果。

一鍵切換成人、兒童口罩因為有了自動更新取得儲存資料的經驗後，做切換markericon的時候就順多了。

直接取得popup內容裡成人口罩、兒童口罩的數量並且依照比例算出落在哪個區間，再用Leaflet的setIcon轉換icon就達成目的了。

不過，偶然間看到資料更新時藥局資料內的背景、marker有正確轉換，而markercluster卻沒有跟著轉換。

此時才意識到忘記於更新資料的程式碼裡加入markers.refreshClusters()，與此同時才意識到測試沒做完全。

更多功能若你覺得口罩地圖還可以加入甚麼功能，歡迎下方留言板告訴我喔！搜尋功能我目前有在考慮該不該做。

navigate_before navigate_next 最新文章 《VampireSurvivors》遊玩操控按鍵與武器組合 VampireSurvivorsonSteamVampireSurvivors是近期的熱門話題遊戲，VampireSurvivors的… 熱門文章 《Minecraft》快捷鍵一覽表 圖片來源：Pixabay嗨！歡迎造訪我的部落格。

良好的運用快捷鍵可以讓一件事在短時間內完成，如：整… 5個讓你輕鬆找到理想MinecraftSkin的網站 5個讓你輕鬆找到理想MinecraftSkin的網站。

由NovaSkinWallpa… 剖析刀劍亂舞全刀種鍛刀時間以及鍛刀配方 鍛刀時間刀劍亂舞中，鍛刀的時間與投入的資源、最終成品是有關係的：投入的資源愈多，鍛刀的時間愈長（純… 《特戰英豪Valorant》預設快捷鍵 特戰英豪是我第一個接觸的射擊競技遊戲，因為我本身對於射擊遊戲非常不上手，瞄準、發射、槍的後座力、等… 如何指定《PokémonGo》伊布的進化型態 在PokémonGo中，伊布的進化可以由玩家自己選擇，有簡單的方法亦有複雜的方法。

最廣為人知… 《Minecraft》Optifine光影，Java版也有光線追蹤（RayTracing） 封面圖光影讓Minecraft更加貼近真實，最近吵得沸沸揚揚的光線追蹤（Raytracing… 分類 刀劍亂舞 凡走過必留下痕跡 生活駭客 原神GenshinImpact 射擊遊戲 動漫 推薦 教學 陰陽師Onmyoji 最新消息 開發手札 影像設計 AviUtl Blogger Minecraft Minecraft原版 Minecraft模組 MinecraftSkin NintendoSwitch PokémonGo Steam ToramOnline VampireSurvivors