单张地图无法在mdb的步进器中正确呈现

编程问答 2022-06-11

问题描述

我已经在我的角度项目中成功地集成了ngx-leaflet的不同的传单地图。 现在，我遇到了以下问题： 对于CSS，我另外使用了Bootstrap的材料设计（mdb），有一点我必须使用步进器。步进器是mdb的组件，我需要在步进器的步骤中呈现传单地图。但是步进器无法在CSS和功能中正确加载。我已经在此问题上添加了图片。

我认为这是因为步进器的台阶在从一个台阶转到另一个台阶时会改变其大小。但是我只是不知道如何解决这个问题。 当相关步骤处于活动状态时，我尝试渲染地图并再次设置尺寸，但这不起作用。传单地图中的功能invalidateSize();的常见解决方案对我也不起作用。

能帮我吗？ 提前非常感谢！

这是我的html：

<mdb-stepper #stepper class="custom-stepper" (window:resize)="stepperOrientation()" [vertical]="vertical"
        [linear]="true">
...
<mdb-step #standortStep name="Standort">
    <ng-container *ngIf="standortStep.isActive">
        <div class="row m-0 mt-4">
            <mdb-card class="location-title p-2 w-100">
                Titel
            </mdb-card>
        </div>
        <div class="row m-0 px-2">
            <div class="create-map-wrapper">
                <div leaflet class="create-map" [leafletCenter]="center" [leafletFitBounds]="fitBounds"
                [leafletBaseLayers]="baseLayers" [leafletLayers]="markers" (leafletClick)="mapClicked($event)"
                *ngIf="standortStep.isActive">
                </div>
            </div>
        </div>
    </ng-container>
</mdb-step>
...
</mdb-stepper>

这是我的CSS：

.create-map-wrapper {
  width: 100%;
  .create-map {
    height: 30vh;
  }
}

This is what is rendered in the Browser

已添加：layers的某些部分已正确显示，但地图的大部分为灰色，因此我无法以应有的方式与地图进行交互。当我用鼠标缩放时，就像这样：

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularleafletmdbootstrapngx-leaflet