媒体查询：Google地图不会在窗口调整大小时显示

Question

我使用媒体查询在我的网站上使用自适应布局。

现在，当我通过某个媒体查询调整浏览器窗口的大小时， Google地图显示有问题（参见图片）

我的所作所为：

CSS：

#googleMap2{display: none;}

@media screen and (min-width: 919px){
   #googleMap{display: none;}
   #googleMap2{display: block;}
}

HTML：

<div id="googleMap">[google-map-v3 width="920" height="550" .......]</div>
<div id="googleMap2">[google-map-v3 width="768" height="320" .......]</div>

Answer 1

你需要让地图知道它已经调整大小：

google.maps.event.trigger( map, 'resize' );

在页面或容器的resize事件中调用此方法。

使用这种方法，您可以使用单个地图并根据需要调整其大小，而不必在两个或更多固定大小的地图之间切换。

这个fiddle有一个有效的例子。我不知道你的页面布局的其余部分是什么样的，但为了说明一个常见的布局，我在页面中放置了一个顶部栏和侧边栏，地图填充了右下角的剩余空间。尝试调整页面大小，您将看到它正在运行。