Javascript 仅在上角具有平铺层的传单地图

我正在用Ionic 5和Vue.js开发一个项目，在我的一个屏幕上，我使用了一个传单地图，它必须覆盖几乎整个屏幕

我正在使用，我的代码如下所示：

导入“传单/目录/传单.css”；
从“Vuex”导入Vuex；
从“vuex”导入{mapState，mapGetters}；
从“传单”中输入传单；
从“../store/index”导入存储
从“vue2传单谷歌突变体”导入vue2传单谷歌突变体；
从“vue2传单”导入{LMap、LTILELLAYER、LPolygon、LImageOverlay}；
导出默认值{
名称：“MapBackground”，
商店，
组成部分：{
LMap，
多层
},
计算：{
…mapState（“maps”、[“gMapsKey”、“bounds”、“selected”]），
},
方法：{
ZoomUpdate（zoomLevel）{
如果（zoomLevel用于角度，则应该会有所帮助

    import * as L from 'leaflet';   
    @Component({
      selector: 'app-home',
      templateUrl: './home.page.html',
      styleUrls: ['./home.page.scss'],
    })
    export class HomePage implements OnInit {
     ngOnInit(){
      let osmMap = L.map('map');
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      }).addTo(osmMap);
    let customMarkerIcon = await icon({
            iconUrl: 'assets/images/test.png',
            iconSize: [50, 50], 
            popupAnchor: [0, -20]
          }); 
  L.marker([11.203,12.300],{icon:customMarkerIcon}).addTo(osmMap);
     const observer = new MutationObserver(() => {
          osmMap.invalidateSize();
          osmMap.setView([11.203,12.300],20);
          observer.disconnect();
        });
        observer.observe(document.documentElement, {
          attributes: true,
          attributeFilter: ['class'],
          childList: false,
          characterData: false,
        });
    }
}

它应该适用于所有类型的离子应用。问题是由于在离子组件之前加载传单图。因此，请尝试下面的一种它应该适用

ionViewDidEnter(){
   let osmMap = L.map('map');
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   }).addTo(osmMap);
   osmMap.invalidateSize();
}

这是未初始化映射大小和/或缺少
invalidateSize（）