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

Leaflet：map invalidatesize not working

1 个答案: