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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014322206/article/details/86479112

一、问题及解决思路

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

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

首先让弹框一开始就显示，并给地图加载增加了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：

<template>
  <div class="map-container">
  </div>
</template>
<script>
export default {
  name: 'Map',
  props: {
    options: Object
  },
  data () {
    return {
      $map: null
    }
  },
  mounted () {
    // $el是当前组件根元素，可以直接用来初始化高德地图实例
    this.$map = new AMap.MAP(this.$el, this.options)
  },
  methods: {
  },
  beforeDestroy () {
    // 组件销毁前可销毁地图实例
    this.$map && this.$map.destroy()
  }
}
</script>

这样能保证dom存在，但有些初始化时要判断容器宽高的插件在dom不显示时获取不到，所以放在dialog中的组件最好配合v-if使用。

② 项目中应用