版权声明:本文为博主原创文章,未经博主允许不得转载。 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使用。
② 项目中应用