vue 弹窗组件加载高德地图组件第一次不显示地图 第二次才显示怎么解决
时间: 2023-09-14 08:08:18 浏览: 247
Vue组件之高德地图地址选择功能的实例代码
这个问题可能是因为高德地图组件需要在弹窗组件显示时才能初始化,但是在第一次加载时弹窗组件可能还没有完全渲染完成,导致地图组件无法正常显示。为了解决这个问题,可以尝试以下几个方法:
1. 在弹窗组件显示后,再手动调用地图组件的初始化方法,确保地图组件已经完全渲染完成,例如:
```
mounted () {
this.$nextTick(() => {
this.map = new AMap.Map('map-container', {
center: [116.397428, 39.90923],
zoom: 13
})
})
}
```
2. 将地图组件的加载放在弹窗组件显示后的回调函数中,确保地图组件加载时弹窗组件已经完全渲染完成,例如:
```
methods: {
openDialog () {
this.showDialog = true
this.$nextTick(() => {
this.map = new AMap.Map('map-container', {
center: [116.397428, 39.90923],
zoom: 13
})
})
}
}
```
3. 将地图组件的加载放在弹窗组件的 activated 钩子函数中,确保每次弹窗组件激活时都重新加载地图组件,例如:
```
activated () {
this.map = new AMap.Map('map-container', {
center: [116.397428, 39.90923],
zoom: 13
})
}
```
以上三种方法都可以解决地图组件第一次不显示的问题,具体选择哪种方法取决于你的具体实现方式和需求。
阅读全文