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 反馈，并在成功或失败后重置状态，避免出现悬空的加载指示器。