0

是的，这个问题很常见，我在这个网站上看到了很多解决方案，但没有一个有帮助。我知道重新调整大小将解决问题。不是 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.

4

2 回答 2

4

“单瓦”情况通常是由在隐藏画布上初始化 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);
});

查看更新的小提琴

于 2013-06-30T11:37:23.620 回答
1

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

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

至：

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

您可以进一步改进，也许通过检查特定选项卡并仅在选择地图选项卡时触发调整大小，但这应该可以帮助您入门。这是一个更新的小提琴。

于 2013-06-30T09:36:00.623 回答