LeafletJS：地图容器已经初始化

Question

我在 Ionic 2 应用程序中使用 Leaflet。第一次运行应用程序时。一切都很好。但是，如果我转到另一个页面并返回地图，则会出现以下异常：

异常：错误：未捕获（承诺中）：异常：构建/页面/map/map.html:12:18 中的错误 原始异常：错误：地图容器已初始化。 原始堆栈跟踪： 错误：地图容器已经初始化。

返回此页面时，私有变量映射为空。检查此变量是否为空无效，因为我认为问题出在 new L.Map('mainmap',...

export class MainMapComponent {

  private map;

  constructor(
    private mapService: MapService,
    private geoCodingService: GeocodingService) { }

  ngOnInit() {
    console.log(this.map);
    if( this.map == null ) this.initMap();
  }

  initMap() {
    console.log('init');
    if(this.map) this.map.remove();
    this.map = new L.Map('mainmap', {
      zoomControl: false,
      center: new L.LatLng(40.731253, -73.996139),
      zoom: 12,
      minZoom: 4,
      maxZoom: 19,
      layers: [this.mapService.baseMaps.OpenStreetMap],
      attributionControl: false
    });
    console.log(this.map);
  }

}

Answer 1

可能不是最优雅的解决方案，但对我有用的是在用户离开视图时删除地图：

ionViewCanLeave(){
    document.getElementById("mainmap").outerHTML = "";
}

来源：https://forum.ionicframework.com/t/map-container-is-already-initialized-error-in-ionic-2/81666

Answer 2

ngOnInit() 中的if( this.map == null ) 条件始终为true，因为当您实例化新的MainMapComponent 时，该新实例将获得自己的全新this.map，因此未分配（即undefined）还没有。

这与您的 "mainmap" div 容器可能发生的情况完全不同。

为了更符合您的问题描述，当导航离开您的地图时，您的 "mainmap" div 容器仍然包含地图。返回页面时，您的应用似乎实例化了一个新的MainMapComponent 实例，该实例具有一个新的（尚未分配的）this.map，因此它尝试在"mainmap" div 容器中初始化一个新地图。这就是造成错误的原因。

当您的MainMapComponent 实例被销毁时，您可以尝试使用this.map.remove()，以便"mainmap" div 状态与MainMapComponent 实例的存在（或不存在）一致。但是，如果出于某种原因您同时拥有多个 MainMapComponent 实例，那将无法解决您的问题。

---

更新：

至于最后提到的问题，见Initializing leaflet map in angular2 component after DOM object exists