Загрузка карты в листовке очень медленная

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" (который является контейнером лифлета) динамически устанавливаются, когда модальный появляется. Возможно, это дает некоторые проблемы для вашей карты буклетов, потому что листовки вычисляют ее ширину и высоту, когда она инициализируется, основываясь на ее родительской ширине и высоте. И это происходит, когда ваш модальный символ не отображается, и он может иметь небольшие значения, такие как ширина и высота, и эти небольшие значения становятся шириной и высотой листка.

Вы можете попытаться найти карту буклета, чтобы «обновить» ее размер после вы покажете, модальный и модальный имеет правильную высоту и ширину.

Попробуйте это, сразу после линии вы вызываете ваш модальный показаны:

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

Это собирается заставить листовку повторно вычислить ее размер после 500 мса. (Я думаю, 500 мс достаточно для отображения вашего модального изображения). Попробуйте большее значение, если оно не работает.

Update: Для начальной загрузки 3 просто поместите это в код

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

Подсказка: я предлагаю вам не использовать body в качестве селектора JQuery, как это будет вызывать код для всех модальностей. Используйте более конкретный селектор, который у вас есть в вашей разметке Дополнительная информация здесь Calling a function on bootstrap modal open