javascript - 谷歌地图在 div 之上

Question

早上好! 我有以下问题: 我有一个包含网页(容器)主要信息的 div 和一个包含 Google map 的 div。用户单击一个 div，谷歌地图应该显示在容器顶部(隐藏网页)。当我单击 div 时，我得到的所有内容如下图所示。 http://prntscr.com/38ytlb 请注意， map 已正确显示在屏幕上(左下角的 Google Logo 和右下角的使用条款)。然而， map 只占视口(viewport)的一小部分。

<div id="container">
...
</div>
<div id="map-container">
    <div id="map-canvas"></div>
</div>

#map-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

#map-canvas {
    height: 100%;
    width: 100%;
}

$(document).ready(function () {
    $("#map-container").hide();

    $("#map-toggle").click(function () {
        $("#container").hide();
        $("#map-container").show();
    });
});

提前致谢。

Answer 1

你应该检查两件事

1. map div 大小合适
2. 显示 map 后触发调整大小。这将重新绘制 map 并修复其大小以填充 div。

应该是这样的:

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

map 是您为 google maps 对象命名的任何名称。他们网站上的所有示例都将其命名为 map。

这将在:

$("#map-container").show();