Question

我在使用Vue.js和Bulma选项卡组件（通过Buefy）加载Leaflet地图时遇到问题。

如果将地图放置在标签中，则在调整浏览器窗口大小之前，它不会加载所有图块。

如果将地图放置在“布尔玛”选项卡组件之外，那么它将加载而没有任何问题。

调用map.invalidateSize()似乎有帮助，但是要在选项卡更改时自动执行，我必须使用setTimeout来调用它，并设置很大的延迟，例如1sec-非常难看。

在没有这种invalidateSize解决方法的情况下如何使它工作？

存在问题的示例：https://codepen.io/alxxnder/pen/zyYxwd

没有问题的示例：https://codepen.io/alxxnder/pen/LMYEjr

代码：

new Vue({
  el: '#app',
  data: {
    map: null,
  },
  methods: {
    invalidateSize: function() {
      this.map.invalidateSize();
    }
  },
  mounted() {
    this.map = L.map('map').setView([38.63, -90.23], 12);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
  }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Leaflet Test</title>

  <link rel="stylesheet" href="https://unpkg.com/buefy@0.7/dist/buefy.min.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
</head>

<body>


  <div class="section">
    <div class="container" id="app">
      <b-tabs position="is-centered">
        <b-tab-item label="Tab 1">
          <div class="section">
            Tab 1
            <div class="map" id="map" style="height: 400px; width: 100%"></div>
            <button class="button is-info" @click="invalidateSize()">invalidateSize</button>
          </div>
        </b-tab-item>
        <b-tab-item label="Tab 2">
          <div class="section">
            Tab 2
          </div>
        </b-tab-item>
      </b-tabs>
    </div>
  </div>


</body>

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/buefy@0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

</html>

Answer 1

如Data-toggle tab does not download Leaflet map中所述，此问题是由以下事实引起的：初始化地图容器时，地图容器还没有全尺寸。如果您的地图位于最初隐藏的标签中（例如，在标签2中），则可能会更容易理解。

对于最初处于活动状态的标签（即标签1），Buefy / Bulma可能仍需要一些时间才能显示标签内容。

由于选项卡转换完成时没有任何事件，因此您必须等待转换持续时间后才能调用invalidateSize方法。对于您来说，300ms似乎还可以。

然后，您还应该在用户changes the tab时再次调用它（请参见Buefy选项卡事件），否则，如果在隐藏选项卡时浏览器更改了大小，则同样的问题将再次发生。

在2个标签中包含地图的演示：

new Vue({
  el: '#app',
  data: {
    map: null,
    map2: null,
    tabMaps: []
  },
  methods: {
    invalidateSize: function(tabIndex) {
      setTimeout(() => {
        if (typeof tabIndex === "number") {
          this.tabMaps[tabIndex].invalidateSize();
        } else {
          // invalidate all maps
          this.tabMaps.forEach(map => {
            map.invalidateSize();
          });
        }
      }, 300);
    }
  },
  mounted() {
    this.map = L.map('map').setView([38.63, -90.23], 12);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

    // map2 in tab2
    this.map2 = L.map(this.$refs.map2).setView([38.63, -90.23], 12);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
      this.map2
    );

    this.tabMaps.push(this.map); // 0
    this.tabMaps.push(this.map2); // 1
    this.invalidateSize();
  }
})

<link rel="stylesheet" href="https://unpkg.com/buefy@0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">

<div class="section">
  <div class="container" id="app">
    <b-tabs @change="invalidateSize" position="is-centered">
      <b-tab-item label="Tab 1">
        <div class="section">
          Tab 1
          <div class="map" id="map" style="height: 400px; width: 100%"></div>
          <button class="button is-info" @click="invalidateSize()">invalidateSize</button>
        </div>
      </b-tab-item>
      <b-tab-item label="Tab 2">
        <div class="section">
          Tab 2
          <div class="map" ref="map2" style="height: 400px; width: 100%"></div>
        </div>
      </b-tab-item>
    </b-tabs>
  </div>
</div>

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/buefy@0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

使用Vue.js在Bulma选项卡中未加载传单地图

1 个答案: