传单：地图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" ）。
• 如果每次打开模态时都需要在不同位置显示标记，则无需销毁地图并从头开始重新创建它。 只需保留对标记的全局引用，将其删除，然后在新位置添加一个新引用即可。