javascript - 在传单中加载 map 非常慢

Question

我在传单中有一张 map ，使用以下代码，当页面加载时， map 没有完全显示，我不知道为什么，如何解决？

var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"></a>',
    subdomains: ['a','b','c']
}).addTo(Mmap);

L.control.scale({imperial:false}).addTo(Mmap);

var north = L.control({position: "topleft"});
north.onAdd = function(map) {
    var div = L.DomUtil.create("div", "info_legend leaflet-bar");
    div.innerHTML = '<img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%">';
    return div;
}
north.addTo(Mmap);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var box = e.geocode.center;
    document.getElementById("Latitude").value = box.lat;
    document.getElementById("Longitude").value = box.lng;
    var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap);
    var group = new L.featureGroup([MarkLayer]);

    Mmap.fitBounds(group.getBounds());
}).addTo(Mmap);

这张 map 是模态的，我称之为 Modal-1从导航栏

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" style="margin-top: -3px;">
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-1">New Customer</a></li>
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-2">New Category</a></li>
    </ul>
</div>

Answer 1

这里有点猜测:我看到你的容器的名字是 "Modalmap" .这让我觉得您在模态容器中显示您的 map 。

我也猜测 "Modalmap" 的高度和宽度(这是传单的容器)正在动态设置，当模态出现时。也许这会给您的传单 map 带来一些问题，因为传单在初始化时会根据其父宽度和高度计算其宽度和高度。当您的模态未显示并且它可能具有像宽度和高度这样的小值时，就会发生这种情况，而这些小值最终成为传单的宽度和高度。

您可以尝试调用传单 map 以“刷新”其大小之后 您显示模态并且模态具有正确的高度和宽度。

试试这个，在你触发你的模态显示的那一行之后:

setTimeout(function(){ map.invalidateSize()}, 500);

这将迫使传单在 500 毫秒后重新计算其大小。 (我想 500 毫秒足以显示您的模态)。如果不起作用，请尝试更大的值。

更新:
对于 Bootstrap 3，只需将其放在您的代码中

$('body').on('shown.bs.modal', function (e) {
    setTimeout(function(){ map.invalidateSize()}, 500);
})

提示:我建议你不要使用 body作为 jquery 的选择器，因为这将触发所有模式的代码。使用标记中更具体的选择器
更多信息在这里 Calling a function on bootstrap modal open