Question

我研究了很多，似乎很多人在这里遇到了和我一样的问题，但我无法弄清楚如何修复它。

基本上我正在隐藏的引导程序选项卡中初始化谷歌地图。当我点击药丸使标签可见时，只显示地图的一小部分。

从我收集的内容来看，这是因为地图是在隐藏元素中初始化的。所以我需要在标签变得可见之后初始化地图。

我已经尝试过，我已经尝试了，但我无法正确使用代码。任何帮助都将是宏伟的 - 我如何使地图仅在标签可见后执行？

提前致谢

<!-- this is the hidden tab-->
<div class="tab-pane map-pane" id="map<?php echo $country_slug; ?>">

<div class = "row">
    <div class = "col-md-12">
      <div id="map-canvas" class = "map-canvas"></div>
    </div>
    </div>

    <!--and here is the map which executes inside the hidden tab-->
    <!--how can i cause this script to delay execution until the tab is shown?-->
<script type="text/javascript">

function initialize() {
    var mapOptions = {
       center: new google.maps.LatLng(22.39813,114.10943),
       zoom: 8
    };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

        }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您应该能够将处理程序附加到Bootstrap选项卡show event ..

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

工作演示：http://bootply.com/102241

Answer 2

http://bootply.com/102479

在地图标签链接中添加ID，以便更容易识别。在显示相应的选项卡内容时触发地图调整大小事件。

这样地图只会初始化一次，而前一个答案则不然。

请注意，您需要在初始化函数之外定义map变量。

Answer 3

$('#myTab a[href="#location"]').on('shown.bs.tab', function (e) {
    initialize();
});

Answer 4

$('#myTab a[href="#location"]').one('shown.bs.tab', function (e) {
    initialize();
});

使用 .one（）代替 .on（）。这样可以防止一次又一次地重新加载地图;）

Answer 5

我试图让它以每个标签点击为中心..但似乎需要每次初始化...

@MrUpsidown任何其他方式我们可以将实际位置居中而不是每次都初始化？

可能的解决方案......
https://stackoverflow.com/a/25347742/3752338

推迟谷歌地图初始化，直到显示引导标签

5 个答案:

工作演示：http://bootply.com/102241