обновить карту листовки: контейнер карты уже инициализирован

У меня есть страница, на которой пользователю предоставляется выбор, он может переключить карту листовки, которую я показываю.

После начальной загрузки карты листовки моя проблема - когда я хочу обновить карту.

Я всегда получаю "Карта контейнера уже инициализирована":

Проблемная линия:

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

Первоначально он загружается хорошо, но когда я выбираю другой параметр в форме и хочу отобразить карту в другой раз, он падает.

Кстати, я пытался уничтожить и воссоздать $('#mapa') с помощью jQuery перед вторым setView() но он показывает ту же ошибку.

Ответы

Ответ 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);
}

Я использую это:

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

чтобы перезагрузить содержимое div, где отображается карта.

Ответ 2

Попробуйте map.remove();, прежде чем пытаться перезагрузить карту. Это удаляет предыдущий элемент карты, используя библиотеку Leaflet (вместо jquery's).

Ответ 3

лучший способ

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

Вы должны добавить map.off(), он также работает быстрее и не вызывает проблем с событиями

Ответ 4

хорошо, после долгих поисков я понял, что это хорошо задокументировано на http://leafletjs.com/examples/layers-control.html

я перестал перекрашивать карту, но распечатал ее один раз и перекрасил точки при каждом новом вызове ajax, поэтому проблема заключалась в том, как очистить старые точки и напечатать только новые. я закончил делать это:

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

Итак, при каждом новом вызове ajax, перед рисованием новых точек, я делаю следующее:

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

Все идет нормально :-)

Ответ 5

Когда вы просто удаляете карту, она уничтожает ссылку на идентификатор div, поэтому после удаления() вам нужно снова создать div, где будет отображаться карта, чтобы избежать "контейнера" Неадтированная ошибка: карта не найдена "".

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

Ответ 6

Перед инициализацией карты проверьте, карта уже инициирована или нет.

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

Ответ 8

У меня была такая же проблема. Затем я установил глобальную переменную map, например var map = null, а затем для отображения карты я проверить

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

В результате этого решения ваша карта будет инициализирована только в первый раз после того, как эта карта будет заполнена L.Map, тогда она не будет равна нулю. поэтому никакая ошибка не будет такой, как контейнер карты уже инициализируется.

Ответ 9

У меня была такая же проблема на угловых при переключении страницы. Мне пришлось добавить этот код, прежде чем покинуть страницу, чтобы он работал:

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

Без document.getElementById('mapLayer').innerHTML = "" карта не отображалась на следующей странице.

Ответ 10

Вы можете попытаться удалить карту перед ее инициализацией или покинув страницу:

if(this.map) {
  this.map.remove();
}

Ответ 11

используйте функцию redrawAll(), а не renderAll().

Ответ 12

Перед инициализацией карты проверьте, карта уже инициирована или нет

var container = L.DomUtil.get('map');

if(container != null){

container._leaflet_id = null;

}

это работает для меня