推迟谷歌地图初始化，直到显示引导选项卡之后 [英] Postpone google maps initialisation until after bootstrap tab is shown

问题描述

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

基本上我正在一个隐藏的引导选项卡内初始化一个谷歌地图.当我点击药丸使选项卡可见时，只显示了地图的一小部分.

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

我试过了，我也试过了，但我无法正确获取代码.任何帮助都会很大 - 我如何使地图仅在选项卡可见后才执行?

提前致谢

<div class="tab-pane map-pane" id="map<?php echo $country_slug; ?>"><div类=行">
<div id="map-canvas" class = "map-canvas"></div>

<!--这是在隐藏选项卡内执行的地图--><!--我怎样才能让这个脚本延迟执行直到显示选项卡?--><script type="text/javascript">函数初始化(){var mapOptions = {中心:新的 google.maps.LatLng(22.39813,114.10943)，变焦:8};var map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);}google.maps.event.addDomListener(window, 'load', initialize);

解决方案

http://bootply.com/102479

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

这样地图只初始化一次，而上一个答案则不是这种情况.

请注意，您需要在 initialize 函数之外定义 map 变量.

I've researched a lot and it seems like a lot of people have had the same issue as me here, but i cant figure out how to fix it.

Basically i'm initializing a google map inside a hidden bootstrap tab. When i click on the pill to make the tab visible, only a small section of the map is shown.

From what i gather this is because the map is being initialized in a hidden element. So i need to initisialise the map only after the tab becomes visible.

I've tried and i've tried and i cant get the code right. Any help would be grand - how do i cause the map to only be executed after the tab is visible?

Thanks in advance

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

解决方案

http://bootply.com/102479

Add an id to your map tab link so it's easier to identify. Trigger a map resize event when the corresponding tab content is shown.

This way the map is only initialized once, which is not the case with the previous answer.

Note that you need to define the map variable outside of the initialize function.

这篇关于推迟谷歌地图初始化，直到显示引导选项卡之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！