css - 媒体查询 : Google Map not displaying right on window resize

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

您需要让 map 知道它已调整大小:

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

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

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

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