傳單：地圖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"事件的回調內（請注意與您使用的事件的區別： "shown"與"show" ）。
• 如果每次打開模態時都需要在不同位置顯示標記，則無需銷毀地圖並從頭開始重新創建它。 只需保留對標記的全局引用，將其刪除，然后在新位置添加一個新引用即可。