【Vue踩坑之旅】在element的dialog中显示高德地图

一、问题及解决思路

高德地图在页面中引用能够正常显示，但是想在弹框中显示高德地图并进行操作，却显示为空白......

很奇怪，为什么在页面中能够显示，在对话框里就不能显示了。

首先让弹框一开始就显示，并给地图加载增加了3秒延迟，3秒后地图正常显示。喏，看来是组件初始化的时候容器dom还没渲染，因此需要使用nextTick。

其次查看element ui的源码，会发现 <div class="el-dialog__body" v-if="rendered"><slot></slot></div> ，对话框里的内容由div包裹，而div的显示或隐藏使用了v-if指令。因此上面的问题由于初始时v-if绑定的状态为false因此并没有进行渲染，而当v-if为true时，mounted已经执行完成不会再次执行了。

 

因此在dialog中使用高德地图需要注意几点：

① 在弹框中显示高德地图，地图加载loadmap不应该在mounted中（只会执行一次），而应该在修改dialog的visible属性为true后的nextTick里调用loadmap。

② 最好把高德地图封装成组件。第三方插件最好都封装成vue component，这样可以保证插件运行时对应容器dom元素一定存在。这样能保证dom存在，但有些初始化时要判断容器宽高的插件在dom不显示时获取不到，所以放在dialog中的组件最好配合v-if使用

 

二、代码

① 地图组件封装为vue component：

<temp