关于vue开发中,高德地图有时不显示的问题

场景1:在弹出框中初始化地图

先设置

this.dialogVisible = true;

然后再用nextTick初始化地图

this.$nextTick(() => {

this.initAmap();

});

场景2:点击tab页路由回退,导致高德地图不初始化的问题

解决方法:

通过$refs的方式获取map的容器dom,而不是id标签

<div ref="mapContainer"></div>

var map = new AMap.Map(this.$refs.mapContainer, {

zoom: 13, // 级别

center: [114.412619, 23.066318], // 地图中心的经纬度

});

场景3:当一个页面中有多个地方使用高德地图时,若通过id进行渲染,则各个容器的id不能重复,否则也会出现bug

相关推荐
十一.3667 分钟前
127-130 定时器的简介,切换图片练习,修改div移动练习,延时调用
前端·javascript·html
Jolyne_8 分钟前
React下拉框接口请求hook封装
前端
狗头大军之江苏分军8 分钟前
2025,我的"Vibe Coding"时刻:当 AI 成为我的编程搭档
前端
同学807969 分钟前
🔥🔥Vue数字翻滚动画组件:让数据展示更具视觉冲击力
前端·vue.js
一颗烂土豆10 分钟前
🚴‍♂️ Vue3 + Three.js 实战:如何写一个“不晕车”的沉浸式骑行播放器 🎥
vue.js·游戏·three.js
oak隔壁找我15 分钟前
JavaScript 的函数方法apply、call和bind
javascript
HashTang17 分钟前
【AI 编程实战】第 5 篇:Pinia 状态管理 - 从混乱代码到优雅架构
前端·vue.js·ai编程
青莲84317 分钟前
Kotlin Flow 深度探索与实践指南——上部:基础与核心篇
android·前端
Bug生活204819 分钟前
五年断更,AI助我半天复活小程序
前端·微信小程序·ai编程
狗头大军之江苏分军19 分钟前
Node.js 性能优化实践,但老板只关心是否能跑
前端·后端