Google Maps API v3，jQuery UI标签，地图未调整大小

Question

我正在使用Google Maps API v3，显示在jQuery UI标签上。当选择显示地图的选项卡时，我一直在努力触发我的谷歌地图以正确调整大小。这里的jQuery文档http://docs.jquery.com/UI/Tabs提供了：

  

对于Google地图，您还可以调整大小   选项卡显示后的地图   这样：

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

无论我尝试什么，上面的代码都不适用于我。

以下代码可以正常工作，因为当我选择tab 9时它会显示警告。因此，我知道至少我正确地隔离了正确的触发事件。这是代码：

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

当我改变这段代码以包含推荐的resizeMap（）时;命令，它不起作用。相反，它所做的是将字符“＃tabs-9”附加到网址的末尾，然后它甚至不会选择正确的选项卡9.当我使用此代码时，我甚至看不到选项卡9：

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

最后，当我改变代码以包含不同的resize命令“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");
            }
        }
    });
});

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

有关调度resize事件触发器的详细信息，请参阅Map object documentation的“事件”部分。

Answer 2

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

为了避免某些标签上的jQuery UI标签和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

我设法通过在显示地图标签时初始化地图并通过编辑某些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％，您将遇到问题。

希望这有帮助！

Answer 4

首先，转到放置标签模板的文件，搜索加载地图标签的<li>标记并将其放入其中：

<li onclick="reloadmap()">

在

之后的地图脚本中

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

把这个：

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}

Answer 5

我只是通过css解决了

  

map-tab {width：100％;身高：300px;浮动：左; 显示：阻止！重要;保证金：0px;填充：0px;}

然后隐藏隐藏的标签：

  

div [aria-hidden =＆＃34; true＆＃34;] {position：absolute！important;剩下：   -9999999px;}}