Question

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

EXCEPTION：错误：未捕获（在承诺中）：EXCEPTION：构建中的错误/ pages / map / map.html:12:18 原始异常：错误：映射容器已初始化。原装STACKTRACE：错误：地图容器已初始化。

返回此页面时，私有变量映射为null。检查此变量是否为null null无效，因为我认为问题是新的L.Map（＆＃39; mainmap＆＃39;，...

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

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

ManagedInstallerClass.InstallHelper

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

Answer 2

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

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

为了更好地与您的问题说明一致，当您离开地图时，您的"mainmap" div容器仍会保留地图。回到您的页面时，您的应用程序看起来像是实例化了一个新的MainMapComponent实例，该实例有一个新的（未分配的）this.map，因此它会尝试在"mainmap"中初始化一个新地图div容器。这就是产生错误的原因。

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

<强>更新

至于上次提到的问题，请参阅Initializing leaflet map in angular2 component after DOM object exists

LeafletJS：Map容器已初始化

2 个答案:

LeafletJS：Map容器​​已初始化

2 个答案:

LeafletJS：Map容器已初始化