vue 3 中地图实例需在 onmounted 内 await sdk 加载完成后再初始化，容器须有明确宽高并用 ref 绑定，onbeforeunmount 中调用销毁方法清理资源，地图实例用 ref 存储，避免 reactive 包裹或响应式代理干扰。
在 Vue 3 中处理地图实例（如百度地图、MapLibre GL JS 等），核心不是“用哪个钩子”，而是让地图加载时机与 DOM 可用性、第三方脚本就绪状态、组件生命周期三者严格对齐。错用钩子会导致白屏、报错或内存泄漏。
onMounted 中不直接初始化，先等地图 SDK 加载完成
不能在 onMounted 里直接写 new BMap.Map(...) 或 new maplibregl.Map(...)，因为地图 SDK 脚本可能还没下载完，window.BMap 或 maplibregl 还未定义。
- 封装一个异步加载函数（如
loadBaiduMap()或import('maplibre-gl')），返回 Promise - 在 onMounted 内
await它成功后再创建地图实例 - 加超时和错误兜底：5 秒未加载 → 提示“地图服务不可用”；AK 无效 → 显示授权失败
容器必须有明确宽高，且用 ref 精准绑定
地图渲染依赖真实 DOM 尺寸。若容器宽高为 0 或 auto，地图会空白或缩放异常。
