Google Maps API - Mysterious White“地图”加载时弹出窗口 [英] Google Maps API - Mysterious White "Map" Popup Upon Loading

问题描述

UPDATE2：找到问题。我有* {width：100％; height：100％}在我的CSS文件的顶部。这弄糟了整个地图。删除这个问题解决了这个问题。

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

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

如果这个问题已经提出，我表示歉意;我无法找到一个与此问题。

我一直在这一段时间，不能弄清楚问题是什么。下面是发生的情况（对不起，我不允许张贴图片;只是链接）：

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

我有地图画布设置为原始隐藏的div，显示在按钮单击和动画从比例（0）到比例（1）。

我尝试的东西：

• 删除弹出动画。 li>
  
• 对宽度和高度使用绝对值（例如100像素）。


• 在显示之后，最初显示的是block，而不是在页面加载后调用我的initMap（）函数。比display：none。也尝试显示：隐藏。


• 触发调整大小事件。

我发现工作是如果我有一个单独的HTML页面上的地图，这不是我想要的。你应该也知道，当它最初加载，地图是正确的〜500ms，然后白色的地图框弹出。

这里是CSS和HTML标记的地图容器和jQuery显示它：

HTML：

 < div class =content popoutid =content_2>< / div> 
  

CSS：

 code> .content {
 width：100％; 
 height：auto; 
 display：none; 
 text-shadow：none; 
} 
 
 / * Map * / 
＃content_2 {
 background-color：red; 
 height：100％; 
} 
 
 / *用于弹出一个元素的动画。从屏幕中间弹出。 * / 
 .popout {
 animation-name：popout; 
 animation-duration：500ms; 
 -webkit-animation-name：popout; 
 -webkit-animation-duration：500ms; 
} 
 
 @keyframes popout {
 from {transform：scale（0）;不透明度：0; } 
 to {transform：scale（1）;不透明度：1; } 
} 
 
 @ -webkit-keyframes popout {
 from {-webkit-transform：scale（0）;不透明度：0; } 
 to {-webkit-transform：scale（1）;不透明度：1; } 
} 
  

jQuery：

  //里面一些函数
 $（＃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）; 
} 
  

任何帮助。谢谢。

Cohen

解决方案

在地图上，一旦你完成了动画。此外，如果你在地图中使用了一个中心，那么这段代码将是有帮助的：

  var currCenter = map.getCenter ; //获取地图的中心
 google.maps.event.trigger（map，'resize'）; //触发resize事件
 map.setCenter（currCenter）; //应用新中心
  

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

  map = new google。 maps.Map（elem，mapOptions）; 
  

其中 elem 是您的 map-canvas 元素。尝试此操作。

更新：：完全不是解决方案，而是一个黑客来解决你的问题。

 ＃content_2 .gm-style> div：first-child {z-index：initial！important;} 
  pre> 
 
 
在你的风格中添加上面的css。 
 
 
 
您应该更深入地了解有关问题的代码。 :) 
 Codepen更新： http://codepen.io/anon/pen/pcwir 
 
UPDATE2: Found the problem. I had * { width: 100%; height: 100% } at the top of my CSS file. This screwed up the entire map. Removing this solved the problem.

UPDATE: I was able to use CodePen to show my problem.  Just click on the second box from the left in the navigation bar at the bottom.

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

If this question was asked already I apologise; I was unable to find one with this issue.

I've been working on this for a while, and can't figure out what the problem is. Here's an image of what happens (sorry, I'm not allowed to post images; just links):

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

I've got the "map-canvas" set to a div that is originally hidden that shows on a button click and animates from scale(0) to scale(1).  

Things I've tried:


Removing the popup animation.
Using absolute values (ex. 100px) for width and height. I currently use percentages.
Calling my initMap() function after the div has animated and after the page loads.
Having display: block initially rather than display: none. Also tried display: hidden.
Triggering the 'resize' event.


The only thing I've found to work is if I have the map on a separate HTML page, which isn't what I want. You should also know that when it initially loads, the map is correct for ~500ms, then the white "Map" box pops up.

Here is the CSS and HTML markup of the map container, and the jQuery for showing it:

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);
}
Any help is appreciated.  Thank you.

Cohen
解决方案
You need to trigger resize event on the map once you are done with the animations. Also if you have used a center in your map, then this code will be helpful:
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 
Make sure you use this code after your animation is done and the map object is initialized.
If the map is not initialized then you have to reinitialize it again using your code :
map = new google.maps.Map(elem, mapOptions);
where elem is your map-canvas element. Try this.

Update: : well not exactly the solution but a hack to solve your issue.
#content_2 .gm-style>div:first-child{z-index:initial!important;}
Add above css in your style. 

You should look more deeply into the code about the issues. :)
Codepen Update: http://codepen.io/anon/pen/pcwir

                        
这篇关于Google Maps API  -  Mysterious White“地图”加载时弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！