在传单中加载地图很慢

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

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

这张地图是在我从一个导航栏

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

来源

2017-02-22 New at Leaflet

您是否在页面中包含了传单CSS？（它是一个常见的错误） – Sharky

@ Sharky..Yes我已经将它添加到主页 –

请参阅https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map（类似于@ Sharky的下面的答案） – ghybs

猜测这里的位调用它Modal-1一个模式：我看到你的容器的名字是"Modalmap"。这使我认为你正在模态容器中显示你的地图。

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

您可以尝试呼叫小册子地图，以便在之后“刷新”其尺寸您显示模式并且模式已获得其正确的高度和宽度。

试试这个，行权后触发你要显示你的模式：

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

这将迫使小叶后500毫秒重新计算其大小。（我猜500ms足以让你的模态显示出来）。尝试更大的价值，如果它不工作。

更新：对于引导3只是把这个在你的代码

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

提示：我建议你不使用body在jQuery的选择，因为这会触发代码为所有的情态动词。使用您在标记中使用的更具体的选择器更多信息Calling a function on bootstrap modal open

来源

2017-02-22 19:52:38 Sharky

@Sharky ...你是完全正确的，我用模态部分更新了我的问题，你能帮我把这段代码放在哪里setTimeout（function（）{map.invalidateSize（）} ，500）;'？ –

@NewatLeaflet更新了我的答案，它应该适合你！ – Sharky

@Sharky ...我得到这个错误'map.invalidateSize不是一个函数' –

在传单中加载地图很慢

回答

相关问题