Question

当我在bootstrap 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

您需要添加css才能显示地图：

#mapId {
   height: 400px;
}

此外，您需要在触发模式后重新绘制地图，以适应模式窗口的边界。

Demo

Answer 2

我找到了：

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

单张地图的bootstrap 4模态问题

2 个答案: