Question

是的，这个问题很常见，我在这个网站上看到了很多解决方案，但没有一个是有用的。我知道重新调整尺寸可以解决问题。不是jQuery专家，我不知道如何在加载页面并Headline 3处于活动状态后重新调整地图大小。我创建了一个JFiddle示例。任何帮助表示赞赏。

http://jsfiddle.net/KhwZS/1300/

由于

Ignore the top comment and the links provided by @Dr.Molle as these links do not provide the solution that I have been looking for, check out the solution I have accepted.

Answer 1

“单一磁贴”条件通常是通过在隐藏的画布上初始化Google地图引起的，这似乎就是这种情况。

如果要最初隐藏地图并且您不想调整大小，那么您的两个主要选项是：

在可见画布上初始化然后立即隐藏它 - 并希望地图不会闪烁显示。
在第一个显示屏上初始化地图。我在我的一个应用程序中执行此操作，并发现延迟根本不可接受，尽管有一些重量级的分层。

我想您可能也会考虑以下可能性，但我从未尝试过：

在“可见”离屏画布上初始化地图，然后在第一个视图中将其重新定位在屏幕上。此后，画布可以按常规隐藏/显示。

修改

是的，可以在屏幕外初始化地图，然后在屏幕上移动。

HTML：

<div id="off_screen">
    <div class="googleMapContainer" id="map-canvas"></div>
</div>

...

<div class="tab">
    <h3>Headline 3</h3>
    <div id="map-placeholder"></div>
</div>

CSS：

#off_screen {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

使用Javascript：

var $mapCanvas = $("#map-canvas");
map = new google.maps.Map($mapCanvas.get(0), myOptions);
var listenerHandle = google.maps.event.addListener(map, 'idle', function() {
    $mapCanvas.appendTo($("#map-placeholder"));
    google.maps.event.removeListener(listenerHandle);
});

请参阅updated fiddle

Answer 2

解决此问题的一种方法是在选中标签后触发地图上的resize事件。如果将var map;移动到全局范围，则可以更改此行：

$( ".tabs" ).tabs();

为：

$( ".tabs" ).tabs({
    activate: function( event, ui ) {
        google.maps.event.trigger( map, 'resize' );
    }
});

您可以进一步改进，可能通过选中特定选项卡并仅在选择地图选项卡时触发调整大小，但这应该让您开始。这是一个updated fiddle。

JQuery Tabs; Google地图只显示一个图块

2 个答案:

修改