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

【问题标题】：Leaflet map not loading in Bulma tab using Vue.js使用 Vue.js 未在 Bulma 选项卡中加载传单地图
【发布时间】：2018-12-08 21:49:00
【问题描述】：

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

如果地图放置在选项卡内，则在调整浏览器窗口大小之前它不会加载所有图块。

如果地图放置在 Bulma 选项卡组件之外，那么它会毫无问题地加载。

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

如果没有此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>

【问题讨论】：

最重要的是 - 为什么会发生这种情况？
见stackoverflow.com/questions/36246815/…

标签： vue.js tabs leaflet bulma buefy

【解决方案1】：

正如Data-toggle tab does not download Leaflet map 中所解释的，问题是由于您的地图容器在初始化时尚未达到其完整大小。如果您的地图在最初隐藏的选项卡中（例如在选项卡 2 中），您可能会更容易理解。

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

由于选项卡转换完成时没有任何事件，因此您必须等待转换持续时间才能调用invalidateSize 方法。在您的情况下，300 毫秒似乎没问题。

那么你也应该在用户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>

【讨论】：

好的，我让它按我的需要工作。如果地图仅在第二个选项卡上，则添加 <b-tabs @change="invalidateSize()"> 事件侦听器并使用小超时 setTimeout(function(){ self.map.invalidateSize(); }, 10); 调用 invalidateSize 就足够了。不知道为什么昨天它只工作了很大的延迟，但现在似乎 10 毫秒就足够了。在不同的浏览器中尝试了很多次。
您能详细说明一下吗？我正在尝试您的解决方案，但即使延迟很大也无法正常工作
@Hvitis：请随时提出一个新问题，详细说明您的具体问题。
我有完全相同的问题。那我就复制到这里：stackoverflow.com/questions/63315942/…