“单瓦”情况通常是由在隐藏画布上初始化 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);
});
查看更新的小提琴