Question

我试图在2个引导标签中使用Leaflet放置不同的地图。我的问题是当我切换到另一个地图时，地图没有很好地渲染。如果我缩小，我可以看到整个地图放在我标签中间的一个小方块中。如果我调整浏览器的大小（我使用的是Chrome），地图也会调整大小并且可以正常工作，但每次我在地图之间切换时问题就会出现。

        <div class="row">
            <ul class="nav nav-tabs" id="map-tab">
                <li id="tab-suivi" class="active">
                    <a href="#map-suivi" data-toggle="tab">Suivi</a>
                </li>
                <li id="tab-alarm" class="">
                    <a href="#map-alarm" data-toggle="tab">Alarme</a>
                </li>
            </ul>
            <div id="cartoTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="map-suivi">
                </div>
                <div class="tab-pane fade in" id="map-alarm">
                </div>
            </div>
        </div>



    var mymap = L.map('map-suivi').setView([47.786, -3.320], 13);
    var mymapalarm = L.map('map-alarm').setView([47.786, -3.320], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);


    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymapalarm);

我在这里发现了一些有关多个地图有类似问题的人的帖子，但他们的解决方案都没有对我有效。

两个不同的bootstrap选项卡中的两个Leaflet映射

0 个答案: