буклет загружает неполную карту

Я динамически добавляю карту листовок в div. Карта показана только частично, см. Рисунок. Как только я изменяю размер окна браузера, карта полностью отображается. Это можно обойти? Я пробовал некоторые начальные идеи, см. // в коде. Но ни один из них не работал. неполная карта

    function mapThis(lat,long,wikiTitle){       

     var div_Id= "#wikiExtract"+wikiTitle
     var map_Id= "map"+wikiTitle
     $(div_Id).append("<div id='"+map_Id+"' style='width: 600px; height:
     400px'></div>"); 
     var map = L.map(map_Id).setView([lat, long], 10);

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18,
     attribution: 'Map data &copy; <a
     href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-
          SA</a>'
      }).addTo(map);


     //$("#"+map_Id).css( "height", "500px" );
     //map.invalidateSize()
     //$("#"+map_Id).hide()   
     //$("#"+map_Id).show()
     //$(window).trigger('resize');

    }

leaflet
person user2133375    schedule 16.03.2016    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Если хотя бы у вас работает карта (за исключением неполной загрузки тайлов), вы можете просто вызвать map.invalidateSize() после того, как div контейнер вашей карты будет обнаружен / вставлен в DOM с окончательным размером.

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

person ghybs    schedule 16.03.2016
comment
Я пробовал это, но это не привело к изменению поведения. - person user2133375; 16.03.2016
comment
Убедитесь, что вы вызываете его после раскрытия контейнера карты и его окончательных размеров. Он вызывается автоматически, когда вы, например, изменяете размер окна браузера, но, конечно, вы не хотите ждать, пока ваш пользователь выполнит эту операцию, только для того, чтобы ваша карта заработала. - person ghybs; 17.03.2016
comment
Спасибо. Я соответственно изменил свой вариант использования. - person user2133375; 17.03.2016
comment
Я не могу вызвать map.invalidateSize() после открытия контейнера карты. У меня ссылка не определена. Как заставить работать map переменную? - person Sashko Lykhenko; 26.09.2018
comment
Привет, @SashkoLykhenko, похоже, вам лучше открыть свой собственный вопрос с подробностями о вашей проблеме, включая некоторый образец кода для воспроизведения проблемы. В противном случае невозможно сказать, как помочь вам с таким небольшим количеством деталей. - person ghybs; 27.09.2018

arrow_upward
10
arrow_downward

вы можете использовать этот код: он работает для меня.

setInterval(function () {
   map.invalidateSize();
}, 100);
person HamidReza    schedule 06.02.2019

arrow_upward
2
arrow_downward

При использовании JQuery следующий код обновляет размер после того, как документ будет готов:

$(document).ready(function () {
    mymap.invalidateSize();
});
person Daniel H    schedule 12.06.2020