Vue2-传单地图在BoostrapVue模态中无法正确显示 [英] Vue2-leaflet map not showing properly in BoostrapVue modal

问题描述

这是我的问题-Vue2传单地图无法在BootstrapVue模态中正确呈现.

Here's my problem - a Vue2 leaflet map does not render correctly in BootstrapVue modal.

这是视觉上的外观(应该只显示海洋)

Here's what it looks like visually (it should show just the ocean)

<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规则可以像这样那样使地图溢出到模态之外.哪个很奇怪.

As you can see there aren't any CSS rules that could make the map spill outside the modal as it does. Which is weird.

我有点想问这个问题，因为我以前找不到解决方案.

I'm kinda asking this question to answer it myself as I couldn't find a solution before.

推荐答案

这是由于3个问题导致的.

There were 3 issues because of which this was happening.

1.首先-我忘了将传单css加载到main.js中-这就是为什么传单地图在模态之外的原因.

1. First - I forgot to load the leaflet css into main.js - this is why the leaflet map was somehow outside the modal.

//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

Vue.config.productionTip = false;

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

---

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

---

2. Now the map may disappear. Set a width and height on the l-map component's container. I used a class but you can use style="" etc.

<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..现在，您的地图将在模态内渲染，但是如果您移动地图的视图，您将看到传单没有及时下载地图的正方形. 您将看到类似这样的内容:

---

3. Now your map will render within the modal but if you move the map's view, you'll see that leaflet does not download the map's squares in time. You will see something like this:

要解决此问题:

• 在b-modal上为@shown事件创建事件处理程序.

• create an event handler on b-modal for the @shown event.

 <b-modal
   @shown="modalShown"


   @hidden="$emit('clear')"
   size="lg"
   :visible="visible"
   title="Event details"
 >

我叫我的modalShown.

然后，在您的l-map中添加一个ref属性.我叫我mymap.

Then, add a ref attribute to your l-map. I called mine 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>

然后，在Vue方法中为您的视图/组件创建modalShown方法，并在内部调用invalidateSize().

Then, create a modalShown method in the Vue methods for your view/component and call 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);
    }
  }
}

现在一切都很好:

• 地图不应溢出到模态之外
• 地图应该是可见的(duh)
• 在地图正文中时应下载地图正方形

这是我的完整代码，其中包含某些特定于我应用程序的内容，但总的来说，它包含所有代码上面的摘要.

这篇关于Vue2-传单地图在BoostrapVue模态中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！