Aggiorna la mappa del volantino: il contenitore della mappa è già inizializzato

Question

Ho una pagina in cui viene data una selezione all'utente che può cambiare la mappa del volantino che mostro.

Dopo il caricamento iniziale della mappa, il mio problema è quando voglio aggiornare la mappa.

ottengo sempre "Map contenitore è già inizializzato":

La linea problema è:

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

Inizialmente si carica bene, ma quando seleziono un altro parametro nella forma e voglio visualizzare il mappare un'altra volta si blocca.

btw, ho provato a distruggere e ricreare $('#mapa') con jQuery prima del secondo setView() ma mostra lo stesso errore.

Answer 1

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

Io uso questo:

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

per ricaricare il contenuto del div in cui il rendering della mappa.

Answer 2

Provare map.remove(); prima di provare a ricaricare la mappa. Ciò rimuove il precedente elemento della mappa usando la libreria di Leaflet (invece di jquery).

Answer 3

bene, dopo molto che cercano mi sono reso conto che è ben documentato in http://leafletjs.com/examples/layers-control.html

che ho non è conclusa ridipingere la mappa, ma stamparlo una volta e riverniciare i punti in ogni nuova chiamata ajax, in modo che il problema era come pulire risalire i vecchi punti e stampare solo quelli nuovi. ho finito di fare questo:

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 

così, ad ogni nuova chiamata ajax, prima dipingere i nuovi punti, faccio la seguente:

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

finora, tutto bene :-)

Answer 4

avevo stessa problem.then i impostare globalmente cartina variabile mappa es var = null e poi per visualizzazione della mappa i check

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

Con questa soluzione la mappa sarà a inizializzare solo la prima volta dopo che la mappa sarà compilare con L.Map quindi non sarà nulla. quindi nessun errore sarà lì come il contenitore di mappe già inizializzato.

Answer 5

miglior modo

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

Si dovrebbe aggiungere carta.off(), funziona anche più velocemente e non causa problemi con gli eventi

Answer 6

Quando rimuovi una mappa, distrugge il riferimento div id, quindi, dopo remove() devi ricostruire il div dove il verrà visualizzata la mappa, al fine di evitare l'errore "Uncaught Error: Map Map non trovato".

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

Answer 7

utilizzare la funzione redrawAll() anziché renderAll().