【前端筆記】口罩地圖製作筆記 - Medium

... 方便民眾們查詢購買. “【前端筆記】口罩地圖製作紀錄” is published by Jasmin in Jas's Note. ... 這次想來跟風一下，順便挑戰沒接觸過的地圖API GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinJas’sNote【前端筆記】口罩地圖製作筆記在台灣口罩實名制啟動後看到許多前端的大神們紛紛運用自己技術，創造出一個個口罩地圖不論是網站、APP或是LINE機器人，方便民眾們查詢購買這次想來跟風一下，順便挑戰沒接觸過的地圖API文章主要紀錄學習跟使用到的JS，不會談論太多到切版作品DEMO：https://jasmin0410.github.io/mask-map/CODE：https://github.com/Jasmin0410/mask-mapUI版型，感謝參加F2E活動的設計師們👏👏頁面介紹左－藥局列表上方選擇縣市與行政區後，下方會渲覽該區有存貨的藥局點選藥局資訊，右方地圖會移至該藥局座標且顯示資訊popup右－地圖地圖上顯示藥局的marker，點選即會跳出該藥局資訊：地址、電話、口罩存貨狀態串接APIAPI:藥局+衛生所即時庫存GetData.js縣市選單在github上找到有人整理的－台灣縣市，鄉鎮，地址中英文JSON直接下載JSON檔使用NavBar.js－UINavBar.js－JS使用者選擇完縣市後，再依據縣市去render該縣市行政區新增地圖地圖使用到的框架－Leaflet，圖資為OpenStreetMapMaskMap.js在componentDidMount載入地圖加入地圖同時，就必須設定中心點(center)跟縮放程度(zoom)加入資料跟座標為避免效能問題會引入套件leaflet.markercluster讓鄰近的marker以群組管理，需要查看時在縮放展開群組中的藥局Marer以群組為單位接下來~就來引入資料跟新增Marker新增Marker同時使用.bindPopup()，來加上藥局資訊的popupMaskMap.js地圖中心更改雖然一開始將地圖設定了預設縣市跟行政區但其他人使用時總不可能永遠新北市跟新店區吧！所以在切換縣市時，預設將取該區域的第一筆藥局資訊NavBar.js並在縣市選擇清單加上getCenter()，把座標值存入redux中NavBar.js當props改變在MaskMap.js中藉由componentDidUpdate()，移動地圖中心MaskMap.js點擊藥局將地圖中心移至該藥局MaskMap.js加上了修改座標的功能當然，在藥局選單中的每個藥局也要加上修改座標的function拉！StoreItem.js以上就是我的口罩地圖製作筆記也希望這波疫情快快過去，大家都身體健康、平平安安有任何建議也歡迎底下留言指教😃或是點拍手鼓勵一下小妹我吧！👏👏參考資料Youtubeu影片：Leaflet+OpenStreetMap地圖應用開發Leaflet+OpenStreetMap(OSM)特訓班Leaflet筆記29MorefromJas’sNote前端學習/閱讀/旅行ReadmorefromJas’sNoteGetstartedJasmin8Followers前端女子FollowRelatedIsMountainTourismSustainableinNepal?TodayisInternationalMountainDay,andthisyear’sthemeisallaboutsustainablemountaintourism.Let’stalkaboutthis.BREAKINGNEWSItslowlyscrollsacrossIntroduccióntoClimateChangeCLIMATECHANGESt.PeterJulianEymard:RediscovertheEucharist(intro)HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable