在 Leaflet 中加载地图非常缓慢

Question

在 Leaflet 中加载地图非常缓慢

9

我在leaflet中有一个地图，使用以下代码时，页面加载时地图没有完全显示出来，我不知道原因是什么，该如何解决？

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

这张地图在一个弹出框中，我从导航栏中调用了它，名称为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>

- New at Leaflet

2

你是否在你的页面中包含了leaflet的CSS文件？（这是一个常见的错误） - Sharky

@Sharky，是的，我已经将它添加到主页面中了。 - New at Leaflet

请参见 https://dev59.com/oloV5IYBdhLWcg3wc-Ym（类似于@Sharky在下面的回答） - ghybs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sharky · Accepted Answer

我猜测一下：您的容器名称为"Modalmap"。这让我想到您正在模态容器中显示地图。

我还猜测，当模态框弹出时，该"Modalmap"（即leaflet的容器）的高度和宽度是动态设置的。也许这会给你的leaflet地图带来一些问题，因为leaflet在初始化时根据其父元素的宽度和高度计算其宽度和高度。而且这发生在模态框未显示且可能具有较小的宽度和高度值时，这些小值最终成为了leaflet的宽度和高度。

您可以尝试在模态框显示后调用leaflet地图以“刷新”其大小之后，使模态框具有正确的高度和宽度。

尝试在触发模态框显示的代码后加入以下代码：

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

这将强制leaflet在500毫秒后重新计算其大小。(我猜500毫秒足够显示模态框)如果不起作用，请尝试更大的值。

更新：对于Bootstrap 3，只需将此代码放入您的代码中即可。

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

提示：我建议您不要使用 body 作为 jQuery 的选择器，因为这会触发所有模态框的代码。请使用您在标记中拥有的更具体的选择器。更多信息请参见在 Bootstrap 模态框打开时调用函数