Google Maps API - 加载时出现神秘的白色“地图”弹出窗口

Question

UPDATE2：发现问题。我有 * { 宽度：100%; height: 100% } 在我的 CSS 文件的顶部。这搞砸了整个地图。删除它解决了问题。

更新：我能够使用 CodePen 来显示我的问题。只需点击底部导航栏中左起第二个框即可。

http://codepen.io/anon/pen/CDeBc

如果这个问题已经被问过，我很抱歉；我找不到有这个问题的人。

我已经研究了一段时间，但无法弄清楚问题所在。这是发生了什么的图片（抱歉，我不允许发布图片；只有链接）：

http://i.imgur.com/cH8uvLT.png

我已将“地图画布”设置为最初隐藏的 div，在单击按钮时显示并从 scale(0) 动画到 scale(1)。

我尝试过的事情：

• 删除弹出动画。
• 对宽度和高度使用绝对值（例如 100 像素）。我目前使用百分比。
• 在 div 动画后和页面加载后调用我的 initMap() 函数。
• 具有 display: 最初阻止而不是 display: none。也试过 display: hidden。
• 触发“调整大小”事件。

我发现唯一可行的方法是如果我将地图放在单独的 HTML 页面上，这不是我想要的。您还应该知道，当它最初加载时，地图在大约 500 毫秒内是正确的，然后会弹出白色的“地图”框。

这是地图容器的 CSS 和 HTML 标记，以及用于显示它的 jQuery：

HTML：

<div class="content popout" id="content_2"></div>

CSS：

.content {
    width: 100%;
    height: auto;
    display: none;
    text-shadow: none;
}

/* Map */
#content_2 {
    background-color: red;
    height: 100%;
}

/* Animation for "popping" out an element. Pops out from the middle of the screen. */
.popout {
    animation-name: popout;
    animation-duration: 500ms;
    -webkit-animation-name: popout;
    -webkit-animation-duration: 500ms;
}

    @keyframes popout {
        from { transform: scale(0); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
    }

    @-webkit-keyframes popout {
        from { -webkit-transform: scale(0); opacity: 0; }
        to   { -webkit-transform: scale(1); opacity: 1; }
    }

jQuery:

// inside some function
$("#content_"+(i + 1).toString()).show();

if (i + 1 == 2) // #content_2
    initMap();
// end some function

function initMap() {
    mapOptions = {
        center: new google.maps.LatLng(42.9837, -81.2497),
        zoom: 12,
    };

    map = new google.maps.Map(document.getElementById("content_2"), mapOptions);
}

感谢任何帮助。谢谢。

科恩

Answer 1

完成动画后，您需要在地图上触发调整大小事件。此外，如果您在地图中使用了中心，那么此代码将很有帮助：

var currCenter = map.getCenter(); //Gets you the center of the map
google.maps.event.trigger(map, 'resize'); // Trigger the resize event
map.setCenter(currCenter); //Apply the new center 

确保在动画完成并初始化地图对象后使用此代码。 如果地图未初始化，那么您必须使用您的代码再次重新初始化它：

map = new google.maps.Map(elem, mapOptions);

其中elem 是您的map-canvas 元素。试试这个。

更新：：不完全是解决方案，而是解决问题的技巧。

#content_2 .gm-style>div:first-child{z-index:initial!important;}

以你的风格添加上面的 css。

您应该更深入地查看有关问题的代码。 :) Codepen 更新：http://codepen.io/anon/pen/pcwir