在傳單中加載地圖很慢

我在傳單中有一張地圖，使用下面的代碼，當頁面加載時，地圖沒有完全顯示，我不知道爲什麼，這怎麼解決？在傳單中加載地圖很慢

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不是一個函數' –

在傳單中加載地圖很慢

回答

相關問題