css - 媒体查询：谷歌地图未在窗口调整大小时正确显示

Question

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

现在，当我通过某个媒体查询调整浏览器窗口的大小时，谷歌地图显示错误（见图）

我所做的：

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' );

在页面或容器的调整大小事件上调用它。

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

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