将谷歌地图初始化推迟到显示引导选项卡之后

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

http://bootply.com/102479

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

这样地图只初始化一次，而之前的答案并非如此。

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

Answer 2

您应该能够将处理程序附加到 Bootstrap 选项卡显示事件。

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

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

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

Answer 6

引导

选项卡（以及轮播和模态）最初设置为不显示，直到它们变为活动状态，因此地图的父元素的高度/宽度为 0。

我在 Bootstrap3 上遇到了和你一样的问题。 最后，我得到了简单的CSS解决方案。

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}
.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

Answer 7

这可能会有所帮助，不需要JavaScript技巧。

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}
.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

https://stackoverflow.com/a/32551984/3072600