jquery - 触发选项卡时调整 Google 地图的大小

Question

这是我的问题的一个更集中的问题。我有 3 个地图，在 3 个选项卡中。第一张地图显示，其他2张没有。我意识到在调用 Tab 时我需要重新调整地图的大小。但我不确定在哪里放置调整大小的代码。现在我没有得到任何结果：

 $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
      createMap();

})


function createMap() {

    var mapOptions = {
      center: new google.maps.LatLng(30.30, -97.70),
      zoom: 12,
      mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    var map2 = new google.maps.Map(document.getElementById('map_canvas2'),
    mapOptions);

    var map3 = new google.maps.Map(document.getElementById('map_canvas3'),
    mapOptions);

  google.maps.event.addDomListener(window, 'resize', function() {
  map2.setCenter(30.30, -97.70);
  });
  google.maps.event.addDomListener(window, 'resize', function() {
  map3.setCenter(30.30, -97.70);
  });

}

我被称为单击选项卡的功能，但这似乎不起作用？

Answer 1

单击新选项卡时需要触发调整大小事件。您需要将 google map 对象的实例传递给事件触发器。

google.maps.event.trigger(map, 'resize');

https://developers.google.com/maps/documentation/javascript/reference#event

Answer 2

请尝试此代码

$('a.location-map').on('click', function (e) {
            setTimeout(function(){  initialize();  
            google.maps.event.trigger(map, 'resize');},1000);
}); 

Answer 3

试试这段代码，加载页面时加载地图

$(function () { initializeMap();});

之后为选项卡创建点击事件

$('.nav-tabs a').on('click', function () {
                    setTimeout(function () {
                        initializeMap();
                        google.maps.event.trigger(map, 'resize');
                    }, 1000);
                });