在Vue中集成百度地图需确保API加载完成且DOM已挂载，推荐封装异步加载函数，在onMounted中await后初始化；容器须有明确宽高并用ref绑定；beforeUnmount中调用clearOverlays和destroy清理资源。
在Vue生命周期中集成百度地图，关键不是“什么时候调用”，而是“什么时候确保地图API已就绪、容器已挂载、状态可响应”。直接在created里初始化会失败，因为DOM还没生成；盲目在mounted里用window.BMap又可能报错——API脚本还没加载完。正确做法是把“API加载完成”和“DOM挂载完成”两个条件都满足后再初始化地图。
确保地图API脚本已加载完成
不要依赖index.html全局引入（尤其在Vue 3 + Vite或SSR项目中易出错）。推荐封装一个异步加载函数，在需要地图的组件内按需触发：
- 创建
utils/loadBaiduMap.js，返回Promise，内部动态插入script标签并监听window.BMapGL（WebGL版）或window.BMap（2D版）是否就绪 - 使用
onMounted（Vue 3）或mounted（Vue 2）钩子调用该函数，await成功后再执行地图实例化 - 加错误处理：超时（如5秒未加载）、AK无效、跨域拒绝等场景统一提示，避免白屏或静默失败
在mounted中安全创建地图实例
容器DOM必须真实存在且尺寸明确，否则地图可能渲染为空白或缩放异常：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 模板中用
ref="mapContainer"绑定容器元素，样式必须含明确宽高（如style="width:100%; height:400px;"），不能依赖父级flex或auto -
mounted中先检查this.$refs.mapContainer（Vue 2）或mapContainer.value（Vue 3）是否存在，再传给new BMap.Map() - 将地图实例赋值给响应式数据（如
map: null），便于后续调用方法（如panTo、addOverlay）或销毁清理
配合beforeUnmount/destroyed做资源释放
地图实例持有大量DOM引用和事件监听器，不手动清理会导致内存泄漏，尤其在路由频繁切换时：
立即学习“前端免费学习笔记（深入）”；
- 在
beforeUnmount（Vue 3）或beforeDestroy（Vue 2）中调用map.clearOverlays()清空标记，再执行map.destroy() - 若使用了自定义控件、事件监听（如
map.addEventListener('click', handler)），需提前保存handler引用，以便用removeEventListener解绑 - 避免在
unmounted后还尝试访问map对象，可加if (this.map)判断
用vue-baidu-map库简化生命周期管理
如果项目允许引入第三方封装库，vue-baidu-map已内置完整生命周期控制：
- 它自动在组件挂载时加载API（支持AK配置与懒加载）、创建地图、绑定容器，并在卸载时自动销毁
- 所有地图组件（如
<bm-map>、<bm-marker>）都基于props响应式更新，无需手动监听data变化 - 支持TypeScript类型推导，
map实例可通过ref直接获取，事件回调也符合Vue风格（如@click="onMapClick"）
