如果容器最初被隐藏，如何在Vue2Leaflet中调整地图大小
如果容器最初被隐藏，如何在Vue2Leaflet中调整地图大小
提问于 2019-05-13 04:16:38
如果一开始是隐藏的，然后又显示了(例如，如果被引导程序折叠元素隐藏)，我如何从Vue2Leaflet中重新加载一个叶地图？
<template>
<b-container>
<b-button v-b-toggle="collapse" variant="primary">Show map</b-button>
<b-collapse id="collapse">
<div id="map">
<LMap :zoom=13 :center="[47.413220, -1.219482]">
<LTileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></LTileLayer>
</LMap>
</div>
</b-collapse>
</b-container>
</template>
<script>
import Vue from 'vue'
import { LMap, LTileLayer } from 'vue2-leaflet'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'leaflet/dist/leaflet.css'
Vue.use(BootstrapVue)
...
export default {
...
components: {
LMap,
LTileLayer
}
}
</script>
<style>
div#map {
height: 300px;
width: 500px;
}
</style>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-13 04:16:38
我通过使用来自地图对象的invalidateSize函数(如this issue所建议的)和使用折叠元素的@shown属性来使其正常工作：
<template>
<b-container>
<b-button v-b-toggle="collapse" variant="primary">Show map</b-button>
<b-collapse @shown="reloadMap()" id="collapse">
<div id="map">
<LMap ref="map" ...>
...
</LMap>
</div>
</b-collapse>
</b-container>
</template>
<script>
...
export default {
...
methods: {
reloadMap: function () {
this.$refs.map.mapObject.invalidateSize()
}
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56103112
复制相关文章
相似问题
腾讯云开发者
