将google maps初始化推迟到显示bootstrap选项卡后 [英] Postpone google maps initialisation until after bootstrap tab is shown

问题描述

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

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

从我收集的这是因为地图正在被初始化一个隐藏的元素。所以我需要在标签变得可见之后才初始化地图。

我试过了，我试过了，我无法获得正确的代码。任何帮助将是盛大的 - 我如何导致地图只能在标签可见后执行？

预先致谢

 <！ - 这是隐藏标签 - > 
< div class =tab-pane map-paneid =map<？php echo $ country_slug;？>> 
 
< div class =row> 
< div class =col-md-12> 
< div id =map-canvasclass =map-canvas>< / div> 
< / div> 
< / div> 
 
 <！ - 这里是在隐藏标签内执行的地图 - > 
 <！ - 如何让这个脚本延迟执行直到显示标签？ - > 
< script type =text / javascript> 
 
函数初始化（）{
 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

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

这样地图只会被初始化一次，这与之前的回答不一样。

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

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.

这篇关于将google maps初始化推迟到显示bootstrap选项卡后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！