如何在Element UI 对话框里面加载高德地图

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

在普通页面地图显示正常

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

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

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

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

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

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