maps

此技能為開發互動式網頁地圖工具的工程師提供標準化的開發框架。重點在於 MapLibre GL JS 生態系統，提供架構、效能與使用者體驗的最佳實踐，協助開發者整合地理空間資料並實作具備位置感知的網頁應用。

• 標準化 MapLibre GL JS 的載入方式，包含 CSS 注入與透過 unpkg CDN 加載指令碼。

• 實作 OpenFreeMap Liberty 風格作為預設底圖的規範。

• 提供 UI/UX 設計準則，包含視窗填滿地圖容器與覆蓋層控制面板的配置。

• 完善錯誤處理機制，確保在地圖依賴項載入失敗或被阻擋時，介面仍能優雅降級。

• 整合 navigator.geolocation API，包含按鈕狀態管理、載入中提示，以及針對權限拒絕或逾時的友善錯誤處理。

• 響應式設計建議，確保地圖控制項與資訊面板在行動與桌面裝置上的無障礙存取。

• 地圖容器應一律使用絕對定位，以確保其填滿整個視窗空間。

• 使用 map.addControl 搭配 NavigationControl 類別，於右上角實作標準化的縮放與平移功能。

• 實作防護機制，例如檢查 typeof maplibregl === 'undefined'，以防止在受限的瀏覽器環境中發生執行期崩潰。

• 透過 maplibregl.Marker 管理地圖標記，並使用 map.easeTo 實現流暢的地圖平移動畫。

• 建議將狀態文字保持在小而簡潔的 DOM 元素中，並透過輔助函式更新，而非直接操作 DOM。

• OpenFreeMap 為預設推薦協議，若需使用自訂底圖，請確保其符合標準圖磚規範。

• 地理定位請求必須在處理期間提供明確的 UI 反饋，並在成功或失敗後重置狀態，避免出現懸空的加載指示器。