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

相关推荐
wuhen_n18 分钟前
LeetCode -- 15. 三数之和(中等)
前端·javascript·算法·leetcode
七月shi人40 分钟前
AI浪潮下,前端路在何方
前端·人工智能·ai编程
非凡ghost40 分钟前
MusicPlayer2(本地音乐播放器)
前端·windows·学习·软件需求
脾气有点小暴44 分钟前
scroll-view分页加载
前端·javascript·uni-app
beckyye1 小时前
ant design vue Table根据数据合并单元格
前端·antd
布列瑟农的星空1 小时前
还在手动翻译国际化词条?AST解析+AI翻译实现一键替换
前端·后端·ai编程
土豆12502 小时前
Rust 错误处理完全指南:从入门到精通
前端·rust·编程语言
QT 小鲜肉2 小时前
【Linux命令大全】001.文件管理之mmove命令(实操篇)
linux·服务器·前端·chrome·笔记
前端开发爱好者2 小时前
VSCode 重磅更新!要收费了?
前端·javascript·visual studio code