在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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章