Google v3，jQuery用户界面标签，地图不调整大小

Question

我正在使用Google v3，显示在jQuery UI选项卡上。当显示地图的选项卡被选中时，我一直在努力触发我的google地图来正确调整大小。这里的jQuery文档http://docs.jquery.com/UI/Tabs提供了以下内容：

对于Google地图，一旦标签显示如下，您也可以调整地图的大小： $(‘#样例’).bind(‘tabsshow’，函数(事件，ui) { if (ui.panel.id == "map-tab") { resizeMap()；})；

无论我尝试什么，上面的代码都不会对我起作用。

下面的代码可以在我选择制表符9时显示一个警报。因此，我知道至少我正确地隔离了正确的触发事件。以下是代码：

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

当我修改这段代码以包含推荐的resizeMap()；命令时，它无法工作。相反，它所做的是将字符“# tab - 9”附加到url的末尾，然后它甚至没有选择正确的选项卡9。当我使用以下代码时，我甚至看不到标签9：

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

最后，当我修改代码以包含一个不同的调整大小命令"google.maps.event.trigger(map，‘resize’)“时，它仍然不能工作。相反，它确实允许我选择正确的选项卡9，它不像上面的情况那样将字符附加到URL的末尾，但是它不会调整地图的大小。地图仍然只显示部分完整，并在右边有灰色地带。以下是代码：

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

有什么我可以尝试的吗？我很困惑。谢谢。

Answer 1

将以下内容添加到选项卡构造函数中：

$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});

您应该测试ui.index，以确定包含Google地图的面板的基于0的索引，当然还应该更新对myMap和#myTabs的引用。

有关分配调整大小事件触发器的详细信息，请参阅地图对象文档的Events部分。

Answer 2

我知道这个话题很古老，但我认为这可能对某些人有用。

为了避免在其中一些选项卡上呈现jQuery UI tabs和Google的问题，您可以执行以下操作：

//global variables
var gMapsCentralLocation;   //some initial map center location
var mapCenter;              //we will use this to overide your initialy map center so we can "remember" initial viewport when we go back and forth trought tabs
var mapCenterFlag = false;  //indicate if we need to use new google maps viewpoint center, or use initial.
var map;                    //google map

$(document).ready(function () {
    $('#YourTabs').tabs({
        show: function (event, ui) {
            switch (ui.tab.hash) {
                case "#GoogleMapsTab":
                    {
                        preRenderGoogleMaps();
                    }
                    break;
                default:
                    {
                        //to save previous map center when user select some other tab
                        if (map) {
                            mapCenter = map.getCenter();
                        }
                    }
                    break;
            }
        }
    });
    drawRegionOnMap();
});

function preRenderGoogleMaps(){
    //fix rendering issues
    google.maps.event.trigger(map, 'resize');

    if (!mapCenterFlag) {
        map.setCenter(gMapsCentralLocation);
        mapCenterFlag = true;
    } else {
        map.setCenter(mapCenter);
    }
}

function drawRegionOnMap() {
    map = null;    

    var gMapsOptions = {
        zoom: 8,
        center: gMapsCentralLocation,
        //POSSIBLE MAP TYPES (ROADMAP, SATELLITE, HYBRID, TERRAIN)
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), gMapsOptions);
}

Answer 3

我设法解决了这个问题，在显示map选项卡时初始化了地图，还编辑了一些css ( css很可能是主题相关的问题)。

/* Initialise jQuery UI Tabs */
jQuery(function() {
    jQuery( "#tabs" ).tabs({
      fx: {
        opacity: 'toggle',
        duration: 300
      }
    });
});

/* Redraw the Google Map everytime tab-4 is shown/clicked */
jQuery(function() {
            jQuery( "#tabs" ).bind( "tabsshow", function(event, ui) { 
                if (ui.panel.id == "tabs-4") {
                    var mapOptions = {
                      center: myLatlng,
                      zoom: 13,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                }                                         
            });
});

然后添加一些CSS来修复地图控件，如果它们不合适，等等。

#map img { max-width:none; }

如果所有图像的最大宽度设置为100%，则会出现问题.

希望这能有所帮助！