загрузочная модальная проблема 4 с листовкой

Question

У меня проблема с картой листовки, когда я использую ее в режиме начальной загрузки 4.

Карта не отображается правильно, и я не знаю, как это исправить.

это мой скрипт карты:

var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var attr = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(url, {
        maxZoom: 18,
        attribution: attr
    });
var map = L.map('mapId').setView([35.6892, 51.3890], 10).addLayer(osm);
map.on('click', onMapClick);
var markers = [];
function onMapClick(e) {
    var geojsonFeature = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [e.latlng.lat, e.latlng.lng]
        }
    }
    if (markers.length > 0) {
        map.removeLayer(markers.pop());
    }
    var marker;
    document.getElementById('latitude').value = e.latlng.lat;
    document.getElementById('longitude').value = e.latlng.lng;
    L.geoJson(geojsonFeature, {
        pointToLayer: function (feature, latlng) {
            marker = L.marker(e.latlng, {
                riseOnHover: true,
                draggable: true,
            });
            markers.push(marker);
            return marker;
        }
    }).addTo(map);
}

Я ищу решение, чтобы это исправить ::

Это мой модальный код начальной загрузки:

<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">انتخاب موقعیت مکانی ملک از روی نقشه:</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="mapId"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-sm">ثبت</button>
            </div>
        </div>
    </div>
</div>

Answer 1

я нашел это:

<script>
$('#mapModal').on('shown.bs.modal', function(){
    setTimeout(function() {
        map.invalidateSize();
    }, 10);
});

Answer 2

Вам необходимо добавить css для отображения вашей карты:

#mapId {
   height: 400px;
}

Кроме того, вам нужно перерисовать карту после запуска модального режима, чтобы соответствовать границам модального окна.

Демо