Vue leaflet 在構建應用程序時不起作用

Question

我目前正在創建一個使用vue-leaflet （vue3 兼容版本）的 vue3 cli 應用程序

一切都在我的本地開發環境中運行良好，但是一旦構建了我的應用程序，map 就不會加載，即使我像這個線程解釋的那樣調整大小也是如此。

我嘗試使用leafletObject.invalidateSize()方法，但沒有任何改變。

我的 map 是第一次調用時使用 v-if 調用的組件（在列表視圖和地圖之間切換）和初始化后的 v-show

  <transition name="fade" mode="out-in">
    <Map v-if="mapInit"
         v-show="(!mobileView && !listing) ||
          (mobileView && !listing && !getFiltresMobile)"
         :liste="getFilteredList"/>
  </transition>

這是我在使用npm run serve時在我的開發版本上得到的

這是產品版本的結果

這是我的代碼的相關部分，如果您認為需要顯示更多代碼，我可以添加更多

<template>

  <div id="map">
    <l-map v-if="!loading" :style="mapHeight" :zoom="zoom" :center="centerValue" :options="{tap : false}" ref="map">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker v-for="(marqueur) in mapData" :key="marqueur.id" :visible="isFiltered(marqueur)" :lat-lng="marqueur.latLng" :ref="setMarkerRefs" @click="markerClick(marqueur.latLng)">
        <l-icon :icon-url="checkActive(marqueur.latLng)" :icon-size="[30 , 37]" :popup-anchor="popupUpPosition" :icon-anchor="[15, 37]"/>
        <l-popup :options="popupoptions">
          <MarqueurPopup :contenu="marqueur"/>
        </l-popup>
      </l-marker>
    </l-map>
    <Loader v-if="loading"/>
  </div>

</template>

JS

<script>
import "leaflet/dist/leaflet.css"
import { LMap , LTileLayer , LPopup , LMarker , LIcon } from "@vue-leaflet/vue-leaflet";

export default {
  name: "Map",
  props : ['liste'],
  components: {
    Loader,
    MarqueurPopup,
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LIcon,
  },
  data() {
    return {
      url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
      zoom: 13,
      mapData : [],
      markerRefs : [],
      markerRefsDef : [],
      popupoptions : {
        maxWidth : 1000,
        minWidth : 300,
        closeButton : false,
      }
    };
  },

  beforeMount() {
    this.initMap()
  },
  mounted() {
    setTimeout( () => {
      console.log(this.$refs.map.leafletObject) // returns the leaflet map objects
      this.$refs.map.leafletObject.invalidateSize(); // no error but does nothing 
    }, 1000);
  },
  computed : {
    popupUpPosition() {
      if (window.innerWidth < 768) {
        return [0, 74]
      }
      return [0, -37]
    },
    mapHeight() {
      let colonneValue = window.innerWidth / 12;
      if (colonneValue < 115) {
        colonneValue = 115
      }
      let height = window.innerHeight - colonneValue;

      return {height : height+'px'}
    },
  },
  methods : {
    async initMap() {
      this.$store.commit('changeLoading' , true);
      this.mapData = []
      this.mapData = this.getFilteredList
      this.$store.commit('changeLoading' , false);
    },
  }
}
</script>

有沒有辦法檢查invalidateSize()方法是否觸發？ 我的 console.log 沒有錯誤，但沒有任何變化，所以它可能不會觸發該方法？

Answer 1

看起來 Leaflet CSS 錯誤地加載到您的生產包中：拼貼被打亂，沒有縮放和屬性控制。