Листовка: карта invalidatesize не работает

Question

Я работаю над этим всю ночь: пожалуйста, не говорите мне идти в Google. Я прочитал каждый повторяющийся вопрос, всю документальную документацию, которую я могу найти, и просто не могу понять, почему это не работает. Мне пришлось переходить на новые плитки Mapquest, и все работает отлично, за исключением того, что я получаю только один угол моих плит для загрузки. Я знаю, что ответ - это недействительный размер карты. Это то, что работало до этого, и это то, что каждая статья и вопрос/ответ, который я прочитал сегодня вечером, - это ответ. Мне не хватает чего-то очевидного. Пожалуйста помоги. Вот мой сценарий:

<script> 
$('#locModal').on('show.bs.modal', function (event) { 

    var button = $(event.relatedTarget); 
    var mapinfo = button.data('whatever'); 
    var pos = mapinfo.position; 
    var lat = pos.substring(0,7); 
    var ling = pos.substring (10,17); 
    var map = L.map('mapdiv').setView([lat, ling], 6) 
    var name = mapinfo.name; 
    var contact = mapinfo.contact; 
    var address = mapinfo.address; 
    var city = mapinfo.city; 
    var state = mapinfo.state; 
    var zip = mapinfo.zip; 
    var phone = mapinfo.phone; 
    var p1 = phone.substring(0,3); 
    var p2 = phone.substring(3,6); 
    var p3 = phone.substring(6,10); 

if (map != undefined) { map.remove(); } 

window.setTimeout(function() { 
    map.invalidateSize(); 
}, 1000);  

var basemap = L.map('mapdiv', { 
    layers: MQ.mapLayer(), 
    center: [ lat, ling ], 
    zoom: 12, 
    }); 

L.marker([lat, ling]).addTo(map); 

$("#mapModalHeader").html("<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button><h2>" + "Map to " + name + "</h2>"); 


$("#mapModalFooter").html("Mailing Address: " + contact + " " + address + " " + city + ", " + state + " " + zip 
    + " " + "(" + p1 + ") " + p2 + "-" + p3); 

$('body').on('hidden.bs.modal', '.modal', function() { 
    document.location.reload(); 
}); 
}); 
</script> 

Я также попробовал карту invalidatesize так:

(function() { 
    map.invalidateSize(); 
}, 1000); 

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

Answer 1

Это действительно смущает, что вы пытаетесь достичь ...

Сначала вы начинаете вашу карту с var map = L.map('mapdiv').setView([lat, ling], 6), то уничтожить его с помощью map.remove(), то вы пытаетесь обновить свой размер после 1 второго тайма-аута, и, наконец, вы инициализации ваша карта снова, но сохраните ссылку в другой переменной с var basemap = L.map('mapdiv'

Итак, первая ошибка, вероятно, эта странная последовательность инструкций.

Тогда вы могли бы упростить код:

• Вы можете инициализировать карту, как только в качестве контейнера по div карте (#mapdiv в вашем случае) создается как HTML элемент. Нет необходимости, чтобы он отображался или даже был прикреплен к DOM.
• Вы можете использовать invalidateSize(), как только размер контейнера карты изменился. В вашем случае, непосредственно в обратном вызове "shown.bs.modal" event (обратите внимание на разницу с используемым вами событием: "shown" vs.s. "show").
• Если вам нужно показывать маркер в другом месте каждый раз, когда ваш модальный файл открыт, нет необходимости уничтожать карту и воссоздавать ее с нуля именно для этого. Просто держите глобальную ссылку на свой маркер, удалите ее и добавьте новую в новую позицию.