javascript - Google map API - 如何更改 map 高度？

Question

我在我的网站上使用 Google Maps API。我想要一个可以展开和折叠 map 的按钮。问题是，如果我加载高度较小的 map ，当我增加高度(通过 JS)时， map 不会填充整个区域，而是出现一个灰色空间(见下图)。有趣的是，虽然 div 从 200px 开始(在 CSS 中设置)，但它下面的 map (扩展后)更大。它有一些我不知道从哪里得到的值(value)。

我尝试调用“google.maps.event.trigger(map, 'resize');”但这没有任何作用。

折叠:

扩展:

这是按下按钮时运行的 JS 代码:

changeMapSize(btn) {
    if (this.size === 'expanded') {
        this.css('height', '200px');
        google.maps.event.trigger(map, 'resize');
        this.size = 'collapsed';
        btn.text('Expand map');
    }
    else {
        this.css('height', '400px');
        google.maps.event.trigger(map, 'resize');
        this.size = 'expanded';
        btn.text('Hide map');
    }
}

CSS:

/* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
   #map {
    height: 200px;
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

如果需要的话，可以看一下代码here .

Answer 1

此问题已得到解答here 。

特别是，google.maps.event.trigger(map, 'resize') 不再是必需的，也不再是 Maps API 的一部分。

还要检查您是否正在调整 map div 的大小，而不是调整包含 map div 的 div 的大小。