Angular 传单贴图在模式中无法正确渲染，即使在调用map.invalidateSize（）之后也是如此

我遇到了一个其他人似乎都遇到的问题，在我调整大小之前，我的ngx传单地图无法完全渲染。我曾尝试以多种方式调用map.invalidateSize（），例如在ngOnInit、onMapReady中，所有这些都有一个超时。我使用ngx传单2.5，因为3.0+不适用于4.4.5

访问模式的按钮为

<app-map
  (closeButtonClicked)="mapModal.hide()"
  class="modal fade"
  bsModal
  #mapModal="bs-modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="mySmallModalLabel"
  aria-hidden="true"
  [Service]="Service"></app-map>

这是实际地图的代码

googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
});
options = {
    layers: [
        this.googleHybrid
    ],
    zoom: 1.49,
    center: L.latLng([180, -180]),

};

---

传单对地图的大小非常敏感。这意味着无论何时显示/隐藏地图，都需要确保调用

invalidateSize（）

方法。对于ngx引导模式，正确的时间应该在

onShown

事件处理程序中

我已经创建了ngx传单教程ngcli GitHub项目[1]的一个分支，展示了如何使其工作。而这个例子是针对ng5和ngx的-leaflet@3，同样的方法也适用于ng4和ngx-leaflet@2.

[1]

相关摘录如下

在组件中，为onShown事件添加处理程序：

handleOnShown() {
   this.map.invalidateSize();
}

在模板中，设置（onShown）输出以调用处理程序：

<button type="button" class="btn btn-primary"
        (click)="staticModal.show()">
  Show a Map
</button>

<div class="modal fade"
     bsModal #staticModal="bs-modal"
     [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true"
     (onShown)="handleOnShown()">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right"
                aria-label="Close"
                (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="map"
             leaflet
             (leafletMapReady)="onMapReady($event)"
             [leafletOptions]="options"
             [leafletLayersControl]="layersControl"></div>
      </div>
    </div>
  </div>
</div>

出示地图
静态模态
&时代；

//*//在style.css中添加此类映射*/
.地图{
职位：相对！重要；
宽度：100%；高度：600px；
保证金：2倍；
填充：2px；
}
/*--------------------------------------------------------------------*/
//在Angular component.ts文件中
从“@angular/core”导入{Component，EventEmitter，OnInit，Output}；
从“传单”中输入*作为L；
@组成部分({
选择器：“应用程序映射控件”，
模板：
`
`
})
导出类MapControlComponent{
构造函数（）{}
公共地图：L.地图=null；
私有LATOLOG:L.LatLngTuple=[35.706000，51.4025000]；//用于将静态lat long设置为映射
//定义基础层，以便我们可以多次引用它们
streetMaps=L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
特雷蒂娜侦探：是的，
属性：“©；贡献者”
});
//设置显示层的初始设置（我们也可以使用传单层输入绑定）
选项={
图层：[此。街道地图]，
缩放：17，
中心：L.latLng（this.latolog）
};
@Output（）outputLatLong=新的EventEmitter（）；
refreshMap（）{
if（this.map）{
//这是.streetMaps.redraw（）；
this.map.invalidateSize（）；
}
}
onMapReady（地图：L.map）{
map.on（'click'，（eventMouse:L.mouseevent）=>{
this.latolog=[eventMouse.latlng.lat，eventMouse.latlng.lng]；
setView（this.latolog，map.getZoom（））；
this.outputLatLong.emit（this.latolog）；
});
this.map=map；
}
}

能否提供一些代码或更多上下文？通常，您会遇到这个问题，因为您使用的库使用JS调整页面上的元素大小，或者使用[hidden]显示/隐藏元素。所发生的事情是，在对DOM进行任何更改后，传单需要您调用“invalidateSize（）”，这些更改会影响包含映射的现有元素的大小。刚刚编辑。希望它能提供见解。这实际上非常有帮助，我觉得我在这方面取得了进展。我对angular比较陌生，非常感谢你的帮助。如果按钮位于另一个组件中怎么办？不管怎样，这件事应该引起注意吗？我现在在这方面遇到了问题。我假设，即使按钮在另一个组件中，并且您正在使用模式服务显示/隐藏，（onShown）事件仍然会触发，并且您应该仍然能够使用相同的方法。我在拾取事件方面遇到了问题，但这可能与我的角度设置有关。如果我为onMapReady设置了一个超时，并在它触发之前调出模式，那么一切都会正常工作。我只需要修复我的事件不被接收。谢谢你的帮助！考虑在你的答案中加上一些上下文/解释。单独编写代码通常没有多大帮助。请不要为多个问题添加相同的答案。回答最好的一个，并将其余的标记为重复项。看见

<button type="button" class="btn btn-primary"
        (click)="staticModal.show()">
  Show a Map
</button>

<div class="modal fade"
     bsModal #staticModal="bs-modal"
     [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true"
     (onShown)="handleOnShown()">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right"
                aria-label="Close"
                (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="map"
             leaflet
             (leafletMapReady)="onMapReady($event)"
             [leafletOptions]="options"
             [leafletLayersControl]="layersControl"></div>
      </div>
    </div>
  </div>
</div>

/* // In style.css add this class map */
.map {
  position: relative !important;
  width: 100%; height: 600px;
  margin: 2px;
  padding: 2px;
}

/*--------------------------------------------------------------------*/

// In Angular component .ts file

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map-control',
  template: 
    `<div class="map" leaflet
      (leafletMapReady)="onMapReady($event)"
      [leafletOptions]="options"
      (leafletMouseOver)="refreshMap()"
      style="border: black solid 1px;">
    </div>`
})

export class MapControlComponent {

  constructor() { }

  public map: L.Map = null;
  private latoLong: L.LatLngTuple = [35.706000, 51.4025000]; // for set static lat-long to map


  // Define our base layers so we can reference them multiple times
  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });

  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
  options = {
    layers: [this.streetMaps],
    zoom: 17,
    center: L.latLng(this.latoLong)
  };

  @Output() outputLatLong = new EventEmitter<L.LatLngTuple>();

  refreshMap() {
    if (this.map) {
      // this.streetMaps.redraw();
      this.map.invalidateSize();
    }
  }

  onMapReady(map: L.Map) {
    map.on('click', (eventMouse: L.LeafletMouseEvent) => {
      this.latoLong = [eventMouse.latlng.lat, eventMouse.latlng.lng];
      map.setView(this.latoLong, map.getZoom());
      this.outputLatLong.emit(this.latoLong);
    });
    this.map = map;
  }

}