[英]how to invalidateSize leaflet map in vue js?
i'm using vue-nav-tabs plugin, and using @tab-change="handleTabChange"
event for tab changes. 我正在使用vue-nav-tabs插件,并使用
@tab-change="handleTabChange"
事件来更改标签。
i'm using tabs in parent component 我在父组件中使用标签
methods: {
handleTabChange() {
this.$refs.map.invalidateSize();
}
}
this is Map(child component) 这是Map(子组件)
methods: {
invalidateSize() {
this.map.invalidateSize(true);
console.log(true)
}
}
this invalidateSize method run successfully but map doesn't re render. 此invalidateSize方法成功运行,但不会重新呈现地图。
what should i do? 我该怎么办?
The tab-change event of Vue-tabs plugin is emitted synchronously with the actual operation to perform the tab navigation. Vue-tabs插件的tab-change事件与执行标签导航的实际操作同步发出。 Therefore most likely the new tab has not appeared yet when the event fires.
因此,很可能在事件触发时新标签还没有出现。
Using a short timeout after the event should give some time for the tab to appear, and invalidateSize will then be able to get the correct map container dimensions. 在事件之后使用短暂的超时应该给该标签显示一些时间,然后invalidateSize将能够获得正确的地图容器尺寸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.