Vue2-传单地图在 BoostrapVue 模式中无法正确显示

这是我的问题 - Vue2 传单地图无法在 BootstrapVue 模式中正确渲染。

这是它的视觉效果（它应该只显示海洋）

<template>
  <div>
    <b-modal size="lg" :visible="visible" @hidden="$emit('clear')" title="Event details">
      <div class="foobar1">
        <l-map :center="center" :zoom="13" ref="mymap">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          <l-marker :lat-lng="center"></l-marker>
        </l-map>
      </div>

      <template slot="modal-footer">
        <b-btn variant="danger" @click="deleteEventLocal(event.id)">Delete</b-btn>
      </template>
    </b-modal>
  </div>
</template>

<script>
import * as moment from "moment";
import { LMap, LMarker, LTileLayer } from "vue2-leaflet";
import { deleteEvent } from "./api";
import "vue-weather-widget/dist/css/vue-weather-widget.css";
import VueWeatherWidget from "vue-weather-widget";

export default {
  data() {
    return {
      center: L.latLng(event.latitude, event.longitude),
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    };
  },
  props: {
    visible: {
      type: Boolean
    },
    event: {
      required: true,
      type: Object
    }
  },
  methods: {
    async deleteEventLocal(id) {
      await deleteEvent(id);
      this.$emit("refresh");
      this.$emit("clear");
    }
  },
  components: {
    weather: VueWeatherWidget,
    LMap,
    LMarker,
    LTileLayer
  }
};
</script>

正如您所看到的，没有任何 CSS 规则可以使地图像它那样溢出到模态之外。这很奇怪。

我想问这个问题是为了自己回答，因为我之前找不到解决方案。

有 3 个问题导致了这种情况的发生。

1.首先 - 我忘记将传单 css 加载到main.js- 这就是为什么传单地图在模式之外。

//src/main.js
import '@babel/polyfill';
import Vue from 'vue';
import './plugins/bootstrap-vue';
import App from './App.vue';
import router from './router';
import store from './store';
//above imports not important to this answer

import 'leaflet/dist/leaflet.css'; //<--------------add this line

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

2.现在地图可能会消失。设置宽度和高度l-map组件的容器。我使用了一个类，但你可以使用 style="" 等。

<div class="foobar1"> <!-- <--- Add a class on l-map's container -->
  <l-map :center="center" :zoom="13">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="center"></l-marker>
  </l-map>
</div>

<style lang="scss">
  .foobar1 { /* <--- class we added above */
    width: 100%;
    height: 400px;
  }
</style>

3.现在您的地图将在模式中渲染，但如果您移动地图的视图，您会看到传单没有及时下载地图的方块。 你会看到这样的东西：

要解决此问题：

• 创建一个事件处理程序b-modal为了@shown event.

   <b-modal
     @shown="modalShown"
  
  
     @hidden="$emit('clear')"
     size="lg"
     :visible="visible"
     title="Event details"
   >
  

  我打电话给我的modalShown.

• 然后，添加一个ref归因于你的l-map。我打电话给我的mymap.

  <l-map :center="center" :zoom="13" ref="mymap"> <!-- ref attribute added to l-map -->
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="center"></l-marker>
  </l-map>
  

• 然后，创建一个modalShown视图/组件的 Vue 方法中的方法并调用invalidateSize() inside.

  export default {
    data() {
     //some data here
    }
  
    methods: {
       modalShown() {
        setTimeout(() => {
          //mapObject is a property that is part of leaflet
          this.$refs.mymap.mapObject.invalidateSize(); 
        }, 100);
      }
    }
  }
  

现在一切都应该没问题了：

• 地图不应溢出模式之外
• 地图应该是可见的（废话）
• 地图方块应在地图主体内下载

这是我的完整代码，它包含一些特定于我的应用程序的内容，但总的来说它包含上面的所有代码片段。 https://gist.github.com/sethidden/0944dc1135115ba3fb1030892d227e34