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

相关推荐
古迪红尘19 小时前
el-tree 采用懒加载方式,怎么初始化就显示根节点和下级节点
前端·javascript·vue.js
糖墨夕19 小时前
当代码照进生活:一个程序员眼中的欲望陷阱
前端
Aotman_19 小时前
Vue el-table 字段自定义排序(进阶)
前端·javascript·vue.js·elementui·前端框架·ecmascript
Charonrise19 小时前
完美解决Microsft Edge浏览器双击无法打开 双击无反应 无响应 不能用
前端·edge
华仔啊19 小时前
这 5 个冷门 HTML 标签,让我直接删了100 行 JS 代码!
前端·html
西维19 小时前
大屏、看板必备的丝滑技巧 — 数字滚动
前端·javascript·动效
前端工作日常19 小时前
我学习到的AG-UI的功能:全面的交互支持
前端
LawrenceLan19 小时前
Flutter 零基础入门(十三):late 关键字与延迟初始化
开发语言·前端·flutter·dart
深耕AI19 小时前
【wordpress系列教程】03 网站页面的编辑
开发语言·前端