Google Maps API v3，jQuery UI标签，地图未resize
我正在使用Google Maps API v3，显示在jQuery UI标签上。 当选择显示地图的选项卡时，我一直在努力触发我的谷歌地图以正确resize。 这里的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”附加到url的末尾，然后它甚至不会选择正确的选项卡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'); } }); });
我接下来可以尝试的任何想法？ 我很难过。 谢谢。
将以下内容添加到选项卡构造函数中：
$(function() { $("#myTabs").tabs({ show: function(e, ui) { if (ui.index == 0) { google.maps.event.trigger(myMap, "resize"); } } }); });
您应该测试ui.index以获取包含您的Google地图的面板的从0开始的索引，当然myMap更新对myMap和#myTabs引用。
有关调度resize事件触发器的更多信息，请参阅Map对象文档的Events部分。
我知道这个话题很古老，但认为这可能对某人有用。
为了避免在某些选项卡上呈现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); }
我设法通过在显示地图选项卡时初始化地图并通过编辑一些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％，您将遇到问题。
希望这可以帮助！
首先，转到放置选项卡模板的文件，搜索加载地图选项卡的
标记并将其放入：
并在地图脚本之后
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); }
我只用css解决了
map-tab {width：100％; 身高：300px;浮动：左; display：block！important ; margin：0px; 填充：0px;}
然后隐藏隐藏的标签：
div [aria-hidden =“true”] {position：absolute！important; 左：-9999999px;}}