odśwież mapę ulotek: kontener mapy jest już zainicjowany

Question

Mam stronę, na której użytkownik ma możliwość zmiany mapy ulotki, którą pokazuję.

Po początkowym załadowaniu mapy ulotnej, moim problemem jest sytuacja, gdy chcę odświeżyć mapę.

zawsze dotrzesz „pojemnik Map jest już zainicjowany”:

Linia problemem jest:

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

Początkowo ładuje dobrze, ale kiedy wybrać inny parametr w formie i chce, aby wyświetlić mapuj innym razem, gdy się zawiesza.

btw, próbowałem zniszczyć i odtworzyć $('#mapa') z jQuery przed drugim setView(), ale pokazuje ten sam błąd.

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

Używam tego:

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

aby odświeżyć zawartość div gdzie wykonywali mapę.

Answer 2

Spróbuj przed ponownym załadowaniem mapy spróbuj map.remove();. Spowoduje to usunięcie poprzedniego elementu mapy za pomocą biblioteki ulotek (zamiast jquery).

Answer 3

dobrze, po wielu poszukujących i realizowany jest dobrze udokumentowana w http://leafletjs.com/examples/layers-control.html

ja już nie zakończony malowanie mapę, ale go wydrukować raz przemalować punkty na każdej nowej rozmowy ajax, więc problem był jak do czyszczenia stare punkty i drukuj tylko te nowe. I już zakończony w ten sposób:

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 

tak, przy każdym nowym połączeniu Ajax przed malowania nowych punktów, I wykonaj następujące czynności:

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

tak daleko, tak dobrze :-)

Answer 4

miałem sam problem.then ustawić globalnie map zmienna np var map = null, a następnie na wyświetlaczu mapie sprawdzasz

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

Dzięki temu rozwiązaniu Twoja mapa będzie zainicjować tylko po raz pierwszy, że mapa będzie wypełnij L.Map, wtedy nie będzie to zero. więc nie wystąpi błąd, jak już zainicjowano kontener mapy.

Answer 5

najlepszym sposobem

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

Należy dodać mapę.off(), działa również szybciej i nie powoduje problemów ze zdarzeniami

Answer 6

Po prostu usuwa mapę, niszczy referencję div id, więc po remove() musisz ponownie zbudować div, gdzie mapa zostanie wyświetlona, ​​aby uniknąć "Nieprzenikniętego błędu: Nie znaleziono kontenera mapy".

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

Answer 7

używać funkcji redrawAll() zamiast renderAll().