如果容器最初是隐藏的，如何在 Vue2Leaflet 中调整地图大小

Question

如果 Leaflet 地图最初被隐藏然后显示（例如，如果被 bootstrap 折叠元素隐藏），我如何从 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>

Answer 1

我通过使用地图对象中的 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>

如果容器最初是隐藏的，如何在 Vue2Leaflet 中调整地图大小

How to resize map in Vue2Leaflet if container was hidden at first

maps

resize

leaflet

bootstrap-4

vuejs2