web-dev-qa-db-fra.com

actualiser la carte de la brochure: le conteneur de carte est déjà initialisé

J'ai une page où une sélection à l'utilisateur peut changer la carte de tracts que je montre.

Après le chargement initial de la carte des feuillets, le problème est que je souhaite actualiser la carte. 

Je reçois toujours "Le conteneur de carte est déjà initialisé":

La ligne de problème est:

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

Au début, il se charge bien, mais lorsque je sélectionne un autre paramètre dans le formulaire et que je veux afficher la carte une autre fois, il se bloque.

au fait, j'ai essayé de détruire et de recréer $('#mapa') avec jQuery avant la deuxième setView() mais cela indique la même erreur.

javascriptleaflet
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);
}

J'utilise ceci: 

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

pour recharger le contenu de div où render map.

18
Artem_Kovalyov

Essayez map.remove(); avant de recharger la carte. Cela supprime l'élément de carte précédent en utilisant la bibliothèque de Leaflet (au lieu de celle de jquery).

78
Josh

la meilleure façon

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

Vous devriez ajouter map.off (), cela fonctionne aussi plus rapidement et ne cause pas de problèmes avec les événements

17
yit770

après de nombreuses recherches, j’ai réalisé que c’est bien documenté à http://leafletjs.com/examples/layers-control.html

j'ai fini de ne pas repeindre la carte, mais l'imprimer une fois et repeindre les points à chaque nouvel appel ajax. Le problème était donc de savoir comment nettoyer les anciens points et imprimer uniquement les nouveaux. j'ai fini de faire ceci:

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

donc, à chaque nouvel appel ajax, avant peignant les nouveaux points, je fais ce qui suit:

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

jusqu'ici tout va bien :-)

5
leandro713

Lorsque vous supprimez simplement une carte, la référence id div est détruite. Par conséquent, après remove (), vous devez reconstruire la div où la carte sera affichée afin d'éviter "Erreur non capturée: Conteneur de carte introuvable".

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

Avant d’initialiser la recherche de carte, la carte est-elle déjà lancée ou non

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

J'ai eu le même problème. Puis, j'ai défini la variable globale de la carte, par exemple, var map = null, puis pour afficher la carte, je vérifie 

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

Avec cette solution, votre carte ne sera initialisée que la première fois après que cette carte sera remplie par L.Map, alors elle ne sera pas nulle. donc aucune erreur ne sera présente comme le conteneur de carte est déjà initialisé.

1
shaishav shukla

Seulement utiliser cette

map.invalidateSize();

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

0
Mahdi Bashirpour

J'ai eu le même problème sur angulaire lors du changement de page. Je devais ajouter ce code avant de quitter la page pour que cela fonctionne:

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

Sans document.getElementById('mapLayer').innerHTML = "", la carte ne s'affichait pas sur la page suivante. 

0
Dan.faudemer

Ce que vous pouvez essayer est de supprimer la carte avant de l’initialiser ou lorsque vous quittez la page:

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

utilisez la fonction redrawAll () plutôt que renderAll ().

0
Dilan