it-swarm.com.de

broschüre Karte aktualisieren: Kartencontainer ist bereits initialisiert

Ich habe eine Seite, auf der der Benutzer eine Auswahl getroffen hat, er kann die von mir gezeigte Flugblattkarte wechseln.

Nach einem anfänglichen Laden der Karteikarte ist mein Problem, wenn ich die Karte aktualisieren möchte. 

Ich bekomme immer "Map-Container ist bereits initialisiert":

Die Problemlinie lautet:

var map = L.map('mapa').setView([lat, lon], 15);

Anfangs wird es gut geladen, aber wenn ich einen anderen Parameter im Formular auswähle und die Karte ein anderes Mal anzeigen möchte, stürzt sie ab.

Übrigens, ich habe versucht, $('#mapa') vor der zweiten setView() mit jQuery zu zerstören und neu zu erstellen, zeigt jedoch den gleichen Fehler.

37
leandro713

Html:

<div id="weathermap"></div>

JavaScript:

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}

Ich benutze das: 

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

um den Inhalt von div neu zu laden.

18
Artem_Kovalyov

Versuchen Sie map.remove();, bevor Sie versuchen, die Karte neu zu laden. Dadurch wird das vorherige Kartenelement mithilfe von Leaflets Bibliothek (anstelle von Jquery) entfernt.

78
Josh

die beste Weise

map.off();
map.remove();

Sie sollten map.off () hinzufügen, es funktioniert auch schneller und verursacht keine Probleme mit den Ereignissen

17
yit770

nun, nach langem Suchen wurde mir klar, dass es gut dokumentiert ist unter http://leafletjs.com/examples/layers-control.html

ich habe die Karte nicht mehr neu gezeichnet, sondern sie einmal gedruckt und die Punkte bei jedem neuen Ajax-Aufruf neu gezeichnet. ich habe das getan:

var point = L.marker([new_marker[0], new_marker[1]]).addTo(map).bindPopup('blah blah');
points.Push(point); 
//points is a temporary array where i store the points for removing them afterwards

also, bei jedem neuen ajax-anruf, bevor die neuen punkte malt, mache ich Folgendes:

for (i=0;i<points.length;i++) {
  map.removeLayer(points[i]);
}
points=[];

so weit, ist es gut :-)

5
leandro713

Wenn Sie nur eine Map entfernen, wird die Div-ID-Referenz zerstört. Nach remove () müssen Sie das Div erneut erstellen, in dem die Map angezeigt wird, um den "Nicht erfassten Fehler: Map-Container nicht gefunden" zu vermeiden.

if(map != undefined || map != null){
    map.remove();
   $("#map").html("");
   $("#preMap").empty();
   $( "<div id=\"map\" style=\"height: 500px;\"></div>" ).appendTo("#preMap");
}
5
Damico

Vor dem Initialisieren der Kartenprüfung wird die Karte bereits gestartet oder nicht

var container = L.DomUtil.get('map');
      if(container != null){
        container._leaflet_id = null;
      }
3
Dipin Raj C

Ich hatte dasselbe Problem. Dann habe ich global eine Map-Variable gesetzt, z 

if(map==null)then map=new L.Map('idopenstreet').setView();

Bei dieser Lösung wird Ihre Karte erst beim ersten Mal initialisiert, nachdem diese Karte von L.Map gefüllt wurde. Dann wird sie nicht null sein. Es wird also kein Fehler angezeigt, da der Map-Container bereits initialisiert ist.

1
shaishav shukla

Verwenden Sie nur dieses

map.invalidateSize();

https://github.com/Leaflet/Leaflet/issues/690

0

Ich hatte das selbe Problem beim Winkelwechsel beim Seitenwechsel. Ich musste diesen Code vor dem Verlassen der Seite hinzufügen, damit es funktioniert:

    $scope.$on('$locationChangeStart', function( event ) {
    if(map != undefined)
    {
      map.remove();
      map = undefined
      document.getElementById('mapLayer').innerHTML = "";
    }
});

Ohne document.getElementById('mapLayer').innerHTML = "" wurde die Karte nicht auf der nächsten Seite angezeigt. 

0
Dan.faudemer

Sie können versuchen, die Karte vor der Initialisierung oder beim Verlassen der Seite zu entfernen:

if(this.map) {
  this.map.remove();
}
0
saeed karimi

verwenden Sie die Funktion redrawAll () anstelle von renderAll ().

0
Dilan