博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何在Element UI 对话框里面加载高德地图
阅读量:5873 次
发布时间:2019-06-19

本文共 489 字,大约阅读时间需要 1 分钟。

在Element UI 对话框里面加载高德地图的时候发现:被包裹在对话框组件中的地图无法显示,而写在普通页面的地图则没有这种问题

在普通页面地图显示正常

在弹窗中地图无法显示 我们可以看到同样的代码,如果不写在对话框里,显示就没有问题。看了element ui的源码,终于发现问题的原因: 可以看到,对话框里的内容由此div包裹,而这个div的显示或隐藏是使用了v-if指令,查阅vue官方文档,可以了解到v-if的特性:

这也就是说,当对话框未打开之前,我们写在钩子函数中的初始化地图的方法虽然执行了,但因为v-if绑定的状态为假,实际上地图并没有初始化成功,而当我们打开对话框,也就是将v-if渲染条件设为真的时候,mounted方法不会执行,所以对话框里装的只是一个没有经过高德构造函数渲染的普通div,那么我们看到的也就只会是一片空白了。

了解了原因,就找到解决办法了,可以用watch监测对话框显示状态的那个变量

地图显示出来了 还有一种方式也可以加载地图

将地图放入一个组件中,在弹窗中引入这个子组件也可以加载地图

同样是通过对话框显示状态的那个变量来判断地图的加载

转载地址:http://jtenx.baihongyu.com/

你可能感兴趣的文章
微信小程序开发的游戏《拼图游戏》
查看>>
Hibernate-Criteria
查看>>
Java 8——接口中个的默认方法和静态方法
查看>>
Selenium操作页面元素
查看>>
Ubuntu 下安装VNC server
查看>>
Bzoj1034 [ZJOI2008]泡泡堂BNB
查看>>
Bzoj4011 [HNOI2015]落忆枫音
查看>>
Linux-环境变量的设置和查看
查看>>
android关于pull解析的问题-1
查看>>
ArcGIS JavaScript API本地部署离线开发环境
查看>>
【bzoj 4455】小星星(树型DP+容斥原理+dfs建树和计算的2种方式)
查看>>
词法分析程序 LEX和VC6整合使用的一个简单例子
查看>>
如何在WinForm中发送HTTP请求
查看>>
亚马逊EC2根硬盘空间扩容
查看>>
洛谷 P2167 [SDOI2009]Bill的挑战
查看>>
G - Rescue 【地图型BFS+优先队列(有障碍物)】
查看>>
几道查询树上点之间的路径的题目
查看>>
259 [LeetCode] 3Sum Smaller 三数之和较小值
查看>>
iOS Xcode7上真机调试
查看>>
基础知识补充
查看>>