2016-08-08 8 views
1

Ich verwende Leaflet in meiner Ionic 2 App. Wenn Sie die App zum ersten Mal ausführen. Alles ist in Ordnung. Aber wenn ich auf eine andere Seite und zurück zur Karte gehe, bekomme ich die folgende Ausnahme:LeafletJS: Kartencontainer ist bereits initialisiert

AUSNAHME: Fehler: Uncaught (in Versprechen): AUSNAHME: Fehler in Build/seiten/map/map.html: 12: 18 ORIGINAL EXCEPTION: Fehler: Map-Container ist bereits initialisiert. ORIGINAL STACKTRACE: Fehler: Kartencontainer ist bereits initialisiert.

Die private Variable map ist null, wenn Sie auf diese Seite zurückkehren. Überprüfen Sie diese Variable für null beeing hat keine Auswirkung, weil ich das Problem denke, die neue L.Map ist ('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); 
    } 

} 
+0

Was ist der Code der Vorlage mit Ihrer Komponente verbunden? Und wo befindet sich deine 'Hauptkarte'? In Ihrer Komponentenvorlage? Vielen Dank! –

Antwort

2

Der if(this.map == null) Zustand in Ihrem ngOnInit() ist immer true, da, wenn Sie instanziiert ein neues MainMapComponent, dass neue Instanz seine eigene Marke neue this.map bekommen wird daher nicht zugeordnet (dh undefined) noch.

Das ist völlig verschieden von dem, was zu Ihrem "mainmap" div Container geschehen kann.

Um mehr mit Ihrer Problembeschreibung in Verbindung zu stehen, enthält Ihr "mainmap" div Container immer noch eine Karte, wenn Sie von Ihrer Karte weg navigieren. Wenn Sie zu Ihrer Seite zurückkehren, sieht es so aus, als ob Ihre App eine neue MainMapComponent Instanz instanziiert, die eine neue (noch nicht zugeordnete) this.map hat, daher versucht sie, eine neue Karte in "mainmap" div container zu initialisieren. Dies erzeugt den Fehler.

Sie könnten versuchen, this.map.remove() zu verwenden, wenn Ihre MainMapComponent Instanz zerstört wird, so dass der "mainmap" div Status in Par mit der Existenz (oder nicht) von einer Instanz von MainMapComponent ist. Aber das würde Ihr Problem nicht lösen, wenn Sie aus irgendeinem Grund mehr als eine Instanz von MainMapComponent gleichzeitig haben.


Update:

Was das letztgenannte Problem findet Initializing leaflet map in angular2 component after DOM object exists

+0

Ich instanziiere nicht mehr als eine MainMapComponents, aber in onInit() ruft es die neue L.Map() auf demselben Div erneut auf. Ich kann nicht überprüfen, ob ein DOM-Element bereits mit einer Karte initialisiert ist. – rakete

+0

Suchen Sie einfach nach möglichen Kind-Knoten, die bereits von einer anderen Leaflet-Instantiierung hinzugefügt wurden ... – ghybs

+0

Nein, ich bin mir sicher, dass es die Instanz meiner ersten ngOnInit() ist. Aber wie kommt man auf meine this.map var zurück? – rakete

Verwandte Themen