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

单击新选项卡时需要触发resize事件。您需要将Google地图对象的实例传递到事件触发器中。

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

触发标签时调整Google地图的大小

3 个答案: