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

【问题标题】：Postpone google maps initialisation until after bootstrap tab is shown将谷歌地图初始化推迟到显示引导选项卡之后
【发布时间】：2014-01-11 20:36:08
【问题描述】：

我研究了很多，似乎很多人在这里遇到了和我一样的问题，但我不知道如何解决它。

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

据我所知，这是因为地图是在隐藏元素中初始化的。所以我需要在选项卡变得可见后才初始化地图。

我已经尝试过，我已经尝试过，但我无法正确获取代码。任何帮助都会很重要-我如何使地图仅在选项卡可见后才执行？

提前致谢

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

【问题讨论】：

标签： jquery google-maps-api-3 twitter-bootstrap-3

【解决方案1】：

这可能会有所帮助，不需要 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

【讨论】：

【解决方案2】：

引导选项卡（以及轮播和模式）最初设置为不显示，直到它们变为活动状态，因此地图的父元素的高度/宽度为 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;
}

【讨论】：

【解决方案3】：

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

使用 .one() 代替 .on()。这将防止一次又一次地重新加载地图；）

【讨论】：

【解决方案4】：

我试图让它在每次点击标签时居中..但似乎每次都需要初始化......

@MrUpsidown 是否有任何其他方式可以使实际位置居中而无需每次都进行初始化？

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

http://bootply.com/102479

为您的地图标签链接添加一个 ID，以便于识别。显示相应的选项卡内容时触发地图调整大小事件。

这样地图只初始化一次，上一个答案不是这样的。

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

【讨论】：

感谢您的帮助。除了触发调整大小事件之外，我还必须使用以下命令重置中心：map.setCenter(point);
@MrUpsidown .. 我实现了相同的，它在两个选项卡中的两个地图上工作正常，但是当我包含第三个选项卡时，初始化脚本会触发最后一个编写的脚本而不是中间选项卡。
惊人的答案，正是我所需要的！
这就是您发布答案的方式！非常感谢。

【解决方案7】：

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

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

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

【讨论】：

太好了，谢谢。比我尝试的方式更有意义。期待稍后尝试
这真的是最好的方法吗？使用您的代码，每次单击选项卡（不仅是地图）时，地图都会再次初始化......