当使用 Google Maps API 在 jQuery UI 选项卡中呈现地图时，有许多问题似乎是众所周知的。我已经看到发布了关于类似问题的 SO 问题（例如，此处和此处），但那里的解决方案似乎仅适用于 Maps API 的 v2。我检查的其他参考资料在这里和这里，以及我可以通过谷歌搜索找到的几乎所有内容。
我一直在尝试将地图（使用 API 的 v3）填充到 jQuery 选项卡中，结果不一。我正在使用所有东西的最新版本（目前是 jQuery 1.3.2，jQuery UI 1.7.2，不知道地图）。
这是标记和 javascript：
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
和
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
以下是我发现的有效/无效的内容（对于 Maps API v3）：
- 使用 jQuery UI Tabs 文档（以及我链接的两个问题的答案）中描述的偏左技术根本不起作用。事实上，功能最好的代码使用 CSS
.ui-tabs .ui-tabs-hide { display: none; }。 - 让地图显示在选项卡中的唯一方法是将 CSS 的宽度和高度设置
#map_canvas为绝对值。将宽度和高度更改为auto或100%导致地图根本不显示，即使它已经成功渲染（使用绝对宽度和高度）。 - 我在 Maps API 之外的任何地方都找不到它的文档，但它
map.checkResize()不再起作用了。相反，您必须通过调用来触发调整大小事件google.maps.event.trigger(map, 'resize')。 - 如果地图未在绑定到
tabsshow事件的函数内初始化，则地图本身会正确呈现，但控件不会 - 大多数只是完全丢失。
所以，这是我的问题：
- 有没有其他人有完成同样壮举的经验？如果是这样，您如何确定实际可行的方法，因为记录的技巧不适用于 Maps API v3？
- 根据jQuery UI 文档使用 Ajax 加载选项卡内容怎么样？我还没有机会玩弄它，但我的猜测是它会进一步破坏 Maps。让它发挥作用的机会有多大（或者不值得尝试）？
- 如何使地图填充尽可能大的区域？我希望它填充标签并适应页面大小调整，就像在 maps.google.com 上完成的那样。但是，正如我所说，我似乎坚持只将绝对宽度和高度 CSS 应用于地图 div。
抱歉，如果这是冗长的，但这可能是 Maps API v3 + jQuery 选项卡的唯一文档。干杯!