谷歌地图没有在标签2中和标签3中正确加载.如何创建刷新选项卡

Google map is not load properly in tab 2 and tab 3. How to create refresh tabs?

本文关键字：标签创建何创建选项刷新谷歌地图加载更新时间：2023-09-26

我有三个商店的位置，我想在谷歌地图上显示。我已经把它分成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>

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

你需要做的是激活一个选项卡-你需要调用地图大小来重新绘制地图。然后它将根据其容器调整大小。

当你在地图中为该选项卡激活一个选项卡十次通行证或在功能中获得正确的地图时，请这样做：

首先更改初始化函数，这样就不会声明里面的映射：

// 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/

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