关于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

相关推荐
剪刀石头布啊7 小时前
gird网格布局
前端
瞬时出道7 小时前
AI 回答为什么能一个字一个字蹦出来?前端搞懂 SSE 这一篇就够了
vue.js
啃火龙果的兔子7 小时前
Google Chrome(谷歌浏览器)常用快捷键
前端·chrome
剪刀石头布啊7 小时前
js真的是单线程实现异步并发么?
前端
剪刀石头布啊7 小时前
js中改变this指向的操作有哪些
前端
剪刀石头布啊7 小时前
vue、react 列表中使用 index 作为 key 的话,修改某一个元素后会发生什么
前端
方方洛7 小时前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架
java_nnnn8 小时前
JavaEE进阶-HTML基础认识
前端·java-ee·html
鬼手点金8 小时前
Claude Code示范案例-常用快捷命令
java·服务器·前端·计算机视觉·前向传播
CopyCode8 小时前
我排查了一下午,发现项目打包体积翻倍的元凶是它
前端·性能优化