使用 Google Maps API 在 jQuery UI 选项卡中渲染地图时,存在许多问题似乎已经广为人知。我看到类似问题的stackoverflow问答(例如这里和这里),但那里提供的解决方案似乎仅适用于Maps API v2。我还查阅了其他参考资料,例如这里和这里,以及通过谷歌搜索发现的几乎所有内容。
我一直在尝试将地图(使用API v3)放入jQuery选项卡中,但结果并不理想。我正在使用最新版本的所有内容(目前是jQuery 1.3.2,jQuery UI 1.7.2,不确定Maps版本)。以下是标记和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; }
代替。 - 唯一能让地图在选项卡中显示的方法是将
#map_canvas
的 CSS 宽度和高度设置为绝对值。将宽度和高度更改为auto
或100%
会导致地图根本不显示,即使已经成功渲染(使用绝对宽度和高度)。 - 我在 Maps API 之外找不到它有文档记录,但是
map.checkResize()
不再起作用。相反,您必须通过调用google.maps.event.trigger(map, 'resize')
来触发一个调整大小的事件。 - 如果地图未在绑定到
tabsshow
事件的函数内初始化,则地图本身将被正确呈现,但控件不会出现-大多数控件都只是普通的缺失。
所以,我有以下问题:
- 是否有其他人有完成这项相同壮举的经验?如果有,您是如何找出实际可行的内容的,因为文档中提供的技巧对 Maps API v3 不起作用?
- 使用 Ajax 加载选项卡内容如 jQuery UI 文档 中所述呢?我还没有机会尝试它,但我猜它会更破坏地图。让它起作用的机会有多大(或者根本不值得尝试)?
- 如何使地图填充最大可能的区域?我想让它填充选项卡并适应页面调整大小,就像在 maps.google.com 上做的那样。但是,正如我所说,我似乎只能将绝对宽度和高度 CSS 应用于地图 div。
如果这篇文章冗长的话请见谅,因为这可能是 Maps API v3 + jQuery 选项卡的唯一文档。谢谢!