Question

我在传单中有一张地图，使用下面的代码，当页面加载时，地图没有完全显示，我不知道为什么，这怎么可以解决？

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>

Answer 1

这里有点猜测：我看到你的容器的名字是"Modalmap"。这让我觉得你在一个模态容器中显示你的地图。

我还猜测当模态出现时，"Modalmap"（传单的容器）的高度和宽度是动态设置的。也许这给你的传单地图带来了一些问题，因为传单在初始化时根据它的父宽度和高度来计算它的宽度和高度。当你的模态没有显示时它会发生，并且它的宽度和高度可能很小，而这些小值最终会成为传单的宽度和高度。

您可以尝试将传单映射调用到＆＃34;刷新＆＃34;它的大小后显示模态，模态的高度和宽度正确。

尝试这一点，在您触发模式的行之后立即显示：

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

在传单中加载地图非常慢

1 个答案: