Bootstrap 3.0模态中的传单地图冻结

Question

我正在尝试在引导模式中加载地图，但地图部分显示，它也冻结了，所以我无法选择任何区域。尽管使用了 map.invalidateSize() 我的问题仍然存在。有没有人让它在引导模式或任何其他类型的模式中工作？

这是我的代码：

<script type="text/javascript">
    var LbsConfig = {
        Url:'https://map.ghasedakbahar.ir:6443/arcgis/rest/services/iran/FeatureServer/0',
        View: [35.6970, 51.4079],
        MapID: 'map-id',
        Color: {
            Default: '#9ab9ff',
            Selected: '#ff0659'
        }
    };

    var map = LbsMap();
    LbsShowNew(map, function (regions) {
        var maxRegions = 5;
        var errRegions = 'The number of areas is more than 5 areas';
        if (regions.length > maxRegions) {
            alert(errRegions);
            return;
        }
        jQuery('#Regions').val(regions.join(','));
        jQuery('#count-selected').html(regions.length);
    });

    $('#myMap').on('show.bs.modal', function () {
        setTimeout(function () {
            map.invalidateSize();
        }, 10);
    });

</script>

#map-id {
        padding: 0;
        width: auto;
        height: 400px;
    }

<!-- Modal -->
<div class="modal fade" id="myMap" role="dialog" style="margin-top:70px">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content font-yekan">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">'SendSmsDetail'</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <div id="map-id"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Answer 1

我记得以前遇到过同样的问题。互联网上有很多类似的问题，也许这个可以帮助你：

Leaflet map not showing properly in bootstrap 3.0 modal

我认为正在发生的事情是，在创建地图时， 'map-canvas' 元素的容器宽度/高度尚未确定 调整为模态对话框的宽度/高度。这导致地图 尺寸不正确（小于）应有的尺寸。

您可以通过调用 map.invalidateSize() 来解决此问题。这将有助于 重新调整 L.Map 容器的宽度/高度边界。

您可以通过挂钩事件自动调用它 显示引导模式。

$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });

将此代码插入您的 JavaScript。当模态显示时， 然后 map 将使其大小无效。超时是因为可能有 模态显示和添加的一些动画/过渡时间 到 DOM。