Css 媒体查询：谷歌地图未在窗口右键显示调整大小

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

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

我所做的：

CSS:

HTML:

[google-map-v3 width=“920”height=“550”…]
[google-map-v3 width=“768”height=“320”…]

---

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

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

在页面或容器的调整大小事件中调用此选项

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

---

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

我如何称呼它？从一个普通的标签？还是从我在这里指定的GoogleMapHTML代码中调用它？否我使用两个贴图：根据视口尺寸显示和隐藏它们。我这样做是因为这是我知道的当视口改变时如何调整地图大小的最好方法…你有更好的解决方案吗？我想让地图具有响应性，高度：100%不适用于谷歌地图，让我给你一个更具体的例子。我会在一小时内把它寄出去。它将使用一个自动调整大小的map div来填充可用空间。它不会使用固定大小的步骤，而是简单地调整大小以适应。当然，你可以在上面加上固定大小的台阶，但在大多数情况下，让地图精确地填充一个空间会更好。一个问题：您正在使用jQuery吗？我手边的示例代码使用了它，但是如果需要的话，将其更改为直接的DOM代码就足够容易了。

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

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