javascript - 传单: map invalidatesize 不起作用

Question

我整晚都在研究这个问题:请不要告诉我去谷歌。我已经阅读了每个重复的问题以及我能找到的所有传单文档，但无法弄清楚为什么这不起作用。我必须切换到新的 Mapquest 磁贴，一切工作正常，只是我只加载了磁贴的一 Angular 。我知道答案是 map 大小无效。这就是以前有效的方法，这就是我今晚读到的每篇文章和问题/答案所说的答案。我错过了一些明显的东西。请帮忙。这是我的脚本:

    <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>

我也尝试过这样的 map invalidatesize:

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

我的实时网站上的一个关键功能已损坏，请使用您能给我的任何帮助。

Answer 1

你试图实现的目标确实令人困惑......

首先使用 var map = L.map('mapdiv').setView([lat, ling], 6) 启动 map ，然后使用 map.remove 销毁它()，然后尝试在 1 秒超时后更新其大小，最后再次初始化 map ，但使用 var basemap = L.map('mapdiv'

所以第一个错误可能是这一系列奇怪的指令。

然后，您可以简化代码:

• 一旦将 div map 容器(在您的情况下为 #mapdiv)创建为 HTML 元素，您就可以初始化您的 map 。不需要显示它，甚至不需要附加到 DOM。
• 一旦 map 容器大小发生更改，您就可以使用 invalidateSize()。在您的情况下，直接在 "shown.bs.modal" event 的回调中(请注意与您使用的事件的区别:"shown" 与 "show")。
• 如果您需要在每次打开模式时在不同位置显示标记，则无需为此销毁 map 并从头开始重新创建它。只需保留对标记的全局引用，将其删除并在新位置添加新的引用即可。