Google；Google仅用一个平铺显示
Google；Google仅用一个平铺显示
提问于 2013-06-30 08:16:40
是的，这个问题很常见，我在这个网站上看到了很多解决方案，但是没有一个是有帮助的。我知道调整尺寸会解决问题。不是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.
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-30 11:37:23
“单一瓷砖”条件通常是由在隐藏的画布上初始化谷歌地图造成的，这里的情况就是如此。
如果地图最初是隐藏的，并且不想调整大小，那么您的两个主要选项是：
- 在可见的画布上初始化，然后立即隐藏它，并希望地图不闪烁显示。
- 在第一次显示时初始化地图。我在我的一份申请中这样做，尽管有一些重量级的分层，但我发现延迟并不是不可接受的。
我想您可能还会考虑以下的可能性，尽管我从未尝试过：
- 在屏幕外的“可见”画布上初始化地图，然后在第一次查看时在屏幕上重新定位。此后，画布可以按惯例被隐藏/显示。
编辑
是的，地图可以在屏幕外初始化，然后在屏幕上移动.
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);
});请参阅更新小提琴
Stack Overflow用户
发布于 2013-06-30 09:36:00
解决这一问题的一种方法是在选项卡被选中后在地图上触发一个resize事件。如果将var map;移动到全局范围，则可以更改这一行：
$( ".tabs" ).tabs();至：
$( ".tabs" ).tabs({
activate: function( event, ui ) {
google.maps.event.trigger( map, 'resize' );
}
});您可以在此基础上进一步改进，可能通过检查特定的选项卡，并且只在选中map选项卡时触发调整大小，但这将使您开始工作。这是一个更新小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17388485
复制相关文章
相似问题
腾讯云开发者
