谷歌地图API v3，jQuery用户界面选项卡，地图不调整大小

我正在使用GoogleMapsAPIv3，显示在jQueryUI选项卡上。当选择显示地图的选项卡时，我一直在努力触发我的谷歌地图以正确调整大小。这里的jQuery文档提供了：

对于谷歌地图，您还可以调整大小 选项卡显示后的地图如下所示 这：

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

当我选择tab 9时，以下代码将显示一个警报。因此，我知道至少我正确地隔离了正确的触发事件。代码如下：

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

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

当我修改此代码以包含建议的resizeMap（）时；命令，它不起作用。相反，它所做的是将字符“#tabs-9”附加到url的末尾，然后它甚至没有选择正确的tab-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") {
            alert("Alert is working");
        }                                         
    });
});

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

---

你知道我下一步可以试试什么吗？我被难住了。谢谢。

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

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

您应该测试

ui.index

，以获取包含Google地图的面板的基于0的索引，当然还应该更新对

myMap

和

#myTabs

的引用

---

有关调度调整大小事件触发器的更多信息，请参阅的事件部分。

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

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

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

---

我通过在地图选项卡显示时初始化地图以及编辑一些css（css很可能是与主题相关的问题）来解决这个问题

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

#map img { max-width:none; }

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

---

希望这有帮助

首先，转到放置选项卡模板的文件，搜索加载地图选项卡的

标记，并将其放入其中：

<li onclick="reloadmap()">

这样说：

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

我通过css解决了这个问题

地图选项卡{宽度：100%；高度：300px；浮动：左；显示：块！重要；边距：0px；填充：0px；} 然后隐藏隐藏的选项卡：

div[aria hidden=“true”]{位置：绝对！重要；左侧： -9999999px；}

---

resizeMap（）

用于V2。这对你永远都不起作用。谢谢你的帮助。我正在尝试实现您的建议，但不幸的是，它现在仍在工作。这正在工作并生成警报：$（function（）{$（“#tabs”）.tabs（{show:function（e，ui）{if（ui.index==8）{alert（“xxxx”）；}}}）；但这不会调整我的映射：$（function（）{$（“#tabs”）.tabs（{show:function（e，ui）{if（ui.index==8）{google.maps.event.trigger（“映射画布”，“调整大小”）；}}）；您正在将“地图画布”作为字符串传递。映射对象是必需的。请注意

myMap

如何不是字符串。您应该在包含调用映射构造函数返回的结果的变量中维护对对象的引用。很抱歉，前面的注释中的格式错误。对myMap的引用应该是对映射id的引用，如：中所示，还是对：var map=new google.maps.map（mapDiv，{center:new google.maps.LatLng（37.4419，-122.1419）的引用，zoom:13，mapTypeId:google.maps.mapTypeId.Roadmap再次感谢，现在我明白对myMap的引用不是一个字符串，而是对变量中对象的引用，{center:new google.maps.LatLng（37.4419，-122.1419），zoom:13，mapTypeId:google.maps.mapTypeId.ROADMAP}）；}

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