传单:地图无效大小无效

Leaflet: map invalidatesize not working

本文关键字：无效 地图 传单      更新时间：2023-09-26

我整晚都在做这个：请不要告诉我去谷歌。我读过每一个重复的问题，我能找到的所有传单文件，但就是不明白为什么这不起作用。我不得不换上新的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>

我也试过这样的地图无效大小：

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

我的实时网站上的一个关键功能坏了，我可以使用你能给我的任何帮助。

你试图实现的目标真的很令人困惑…

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