Question

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

这是我的代码：

＆＃13;

<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>

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 1

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

Leaflet map not showing properly in bootstrap 3.0 modal

我认为发生的事情是，当地图被创建时，   容器宽度/高度为你的`map-canvas＆＃39;元素还没有   调整到模态对话框的宽度/高度。这会导致地图   大小不正确（小于）应该是。

您可以通过调用map.invalidateSize（）来解决此问题。这将有用   重新调整L.Map容器的宽度/高度范围。

您可以通过挂钩到事件中自动调用此方法   Bootstrap模态显示出来。
$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });
将此代码插入JavaScript中。当显示模态时，然后地图将使其大小无效。超时是因为可能存在模式显示和添加的一些动画/过渡时间到DOM。

小册子地图冻结在bootstrap 3.0模态

1 个答案: