Google 地图在选项卡 2 和选项卡 3 中未正确加载。如何创建刷新选项卡？

Question

我想在谷歌地图上显示 3 个商店位置。我把它分成 3 个标签和 3 个谷歌地图。它在第一个选项卡上运行良好。但是第二个标签和第三个标签没有正确加载。没有标签它工作正常。我发现一些标签需要刷新的博客？我不知道该怎么做，但我尝试并得到错误。任何人都可以帮助我吗？谢谢

下面是我的标签代码：-

    <div class="tabbable" id="tabs-331065">
    <div class="tab-content">
                <div class="tab-pane active" id="panel-127823">
                    <p>
                        <div id="map-city" ></div>
                    </p>
                </div>
                <div class="tab-pane" id="panel-737549">
                    <p>
                        <div id="map-box"></div>
                    </p>
                </div>
                <div class="tab-pane" id="panel-737589">
                    <p>
                        <div id="map-forest"></div>
                    </p>
                </div>
            </div>
            <ul class="nav nav-tabs" id="map-tabs">
                <li class="active" id="map-tab1">
                    <a href="#panel-127823" role="tab" data-toggle="tab">CITY</a>
                </li>
                <li id ="map-tab2">
                    <a href="#panel-737549" role="tab" data-toggle="tab">BOX HILL</a>
                </li>
                <li id="map-tab3">
                    <a href="#panel-737589" role="tab" data-toggle="tab">FOREST HILL</a>
                </li>
            </ul>

        </div>

谷歌地图功能：-

<script>

    function initialize() {
      var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
      var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
      var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
      var mapOptions1 = {
        zoom: 17,
        center: myLatlng1
      }
      var mapOptions2 = {
        zoom: 17,
        center: myLatlng2
      }
      var mapOptions3 = {
        zoom: 17,
        center: myLatlng3
      }
      var map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
      var map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
      var map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);

      var marker1 = new google.maps.Marker({
          position: myLatlng1,
          map: map1,

      });
       var marker2 = new google.maps.Marker({
          position: myLatlng2,
          map: map2,

      });
       var marker3 = new google.maps.Marker({
          position: myLatlng3,
          map: map3,

      });
    }


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



        </script>

Answer 1

原因是当您创建它们时，选项卡 2 和选项卡 3 的地图不可见（例如选项卡 1 处于活动状态），因此它们无法正确调整大小。

您需要做的是激活一个选项卡 - 您需要调用 map resize 以让地图重绘。然后它将根据其容器调整大小。

当您在该选项卡的地图中激活选项卡十遍或在函数中获取正确的地图时，请执行以下操作：

首先改变你的初始化函数，这样你就不用在里面声明地图了：

// declare your maps outside of the functions like this and remove 
// your var where you create them.
var map1, map2,map3;

 function initialize() {
      var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
      var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
      var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
      var mapOptions1 = {
        zoom: 17,
        center: myLatlng1
      }
      var mapOptions2 = {
        zoom: 17,
        center: myLatlng2
      }
      var mapOptions3 = {
        zoom: 17,
        center: myLatlng3
      }

      // Note I removed the var
      map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
      map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
      map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);

      var marker1 = new google.maps.Marker({
          position: myLatlng1,
          map: map1,

      });
       var marker2 = new google.maps.Marker({
          position: myLatlng2,
          map: map2,

      });
       var marker3 = new google.maps.Marker({
          position: myLatlng3,
          map: map3,

      });

     // attach the tab click handler
     attachTabClick();
  }

然后在准备好的文档或初始化函数的底部附加一个选项卡激活函数：

function attachTabClick()
{

   $('.nav-tabs').bind('click', function (e) 
   {
      // e.target is the link
      // so use its parent to check which map to show

      var tabId = e.target;      

      //check the ID and only call the resize you need - 
      if(tabId == 'panel-127823')
      {
         resizeMap(map1)
      }
      else if(tabId == 'panel-737549')
      {
         resizeMap(map2);
      }
      else if(tabId == 'panel-737589')
      {
         resizeMap(map3)
      }           
    });
}

然后调用函数调整地图大小：

function resizeMap(map)
{
   setTimeout(function()
   {
       var center = map.getCenter();
       google.maps.event.trigger(map, "resize");
       map.setCenter(center);
   },50);
}

更新：

这是一个有效的小提琴：http://jsfiddle.net/loanburger/fzhgjfrb/

1. 请注意，我在调整大小之前添加了一个轻微的超时，因为我发现 div 需要时间才能正确显示。
2. 其次，我正在为所有地图调用调整大小 - 您需要检查正确的 ID，并且只为可见的地图调用调整大小。