Question

我尝试在模态引导程序中显示地图，但我有这个显示：

代码模式：

<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':displaymap}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="onCloseHandledmap()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">test</h4>
      </div>
      <div class="modal-body">
        <div class="row">
        <div class="col-sm-12">
              <agm-map  [scrollwheel]="false" [zoom]="zoom">
                 <ng-container>
                   <agm-polyline [strokeColor]="color" [strokeWeight]="weight" >
                      <agm-polyline-point *ngFor="let test of lines" [latitude]="test.latitude" 
                      [longitude]="test.longitude" >
                      </agm-polyline-point>
                  </agm-polyline>
                </ng-container>
              </agm-map>
        </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="onCloseHandledmap()" >Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

并在组件I中添加以下代码：

我尝试使用此代码：

   ngOnInit() {
    $('.modal').on('shown.bs.modal', () => this.agmMap.triggerResize());
}

并使用此代码：

       ngOnInit() {
        this.resizeMap();
    }

    resizeMap() {
        this.map.triggerResize();
    }

但也显示..地图不显示，在css中我尝试

agm-map{ height:500px;}

Answer 1

尝试相应地设置你的Bootstrap模态和地图的z-index，以便地图显示在顶部。确保您正在应用映射容器的z-index，其中设置了Google的init函数以对其进行操作。

您可以尝试通过开发人员预览此更改。控制台，以确保这实际上是你的问题。

$('.modal').css('z-index', '10000'); 
$('agm-map').css('z-index', '100001');
$('ng-container').css('z-index', '100002');

地图没有显示在模态引导程序中

1 个答案: