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

相关推荐
亿元程序员11 小时前
光图片就300多M,微信小游戏给再大的分包也难啊!
前端
中工钱袋11 小时前
前端请求到底是从哪里发出去的?
前端
じòぴé南冸じょうげん14 小时前
若依框架favicon.ico缓存更新问题解决方案:本地生效但线上未更新
前端·javascript·前端框架·html
狮子座的男孩14 小时前
js基础高级:01、数据类型(typeof、instanceof、===的使用)、数据与变量与内存(定义、赋值与内存关系、引用变量赋值、js调函数传参)
前端·javascript·经验分享·数据类型·数据与变量与内存·赋值与内存关系·引用变量赋值
Cyclo-17 小时前
PDFJS 在React中的引入 使用组件打开文件流PDF
前端·react.js·pdf
椒盐螺丝钉20 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js
顾安r20 小时前
11.20 开源APP
服务器·前端·javascript·python·css3
敲敲了个代码20 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清21 小时前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三21 小时前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程