Javascript 谷歌地图部分出现，灰色区域代替谷歌服务器的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3838580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map comes partially, grey area comes instead of images from google server
提问by Vishwanath
Sometimes google map comes partially with other area getting grayed out. There is one catch, if we start Firebug, images do come in that gray area. Dont know why this is happening. Anybody ever experienced this and found solution, Please share.
有时谷歌地图部分带有其他区域变灰。有一个问题，如果我们启动 Firebug，图像确实会出现在那个灰色区域。不知道为什么会这样。任何人都经历过这个并找到了解决方案，请分享。
采纳答案by Hitman_99
This bug can occur if you are resizing the map's DIV. After resizing, try to call gmap.checkResize()function.
如果您正在调整地图的DIV. 调整大小后，尝试调用gmap.checkResize()函数。
回答by Argiropoulos Stavros
回答by MRodrigues
Hi if you are using toggle in a div with a map container you call resizeMap in the function
嗨，如果您在带有地图容器的 div 中使用切换，则在函数中调用 resizeMap
associated with the trigger:
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
resizeMap();
return false;
then resizeMap(); like this
然后 resizeMap(); 像这样
function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}
don't forget to set map variable as global ;) cheers
不要忘记将地图变量设置为全局 ;) 欢呼
回答by Milan
I found a simple solution for the partially loaded google map. Usually it is caused by the onLoad()being called at times when the rest of the page (including your map element) is not completely loaded. This causes partial map load. A simple way around this issue is to change your onLoadbody tag action.
我为部分加载的谷歌地图找到了一个简单的解决方案。通常是由于onLoad()页面的其余部分（包括您的地图元素）未完全加载时被调用造成的。这会导致部分地图加载。解决此问题的一个简单方法是更改您的onLoad身体标签操作。
The old way:
旧方法：
onload="initialize()"
The new way:
新方式：
onLoad="setTimeout('initialize()', 2000);"
This waits 2 seconds before the Google Javascript accesses the correct size attributes. Also make sure to clear your browser cache before trying it; sometimes it gets stuck there :)
这会在 Google Javascript 访问正确的大小属性之前等待 2 秒。在尝试之前，请确保清除浏览器缓存；有时它会卡在那里:)
This is my top Javascript part in case you wondering (exactly as described in Google Documentation but because I am calling the Latitudeand Longitudefrom PHP variables, hence the PHP snippets.
如果您想知道，这是我最重要的 Javascript 部分（正如 Google 文档中所述，但因为我从 PHP 变量调用Latitude和Longitude，因此是 PHP 代码段。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
var marker = new google.maps.Marker({ position:point, map:map })
}
</script>
回答by Izekid
I just wanna add to this discussion that I had this problem with grey stripes aswell, and this wasen't the same issue that I needed to use the gmap.Resize Function but that it was in my css. In my css I had
我只是想添加到这个讨论中，我也有灰色条纹的问题，这与我需要使用 gmap.Resize 函数不同，但它在我的 css 中。在我的 css 中，我有
img {
max-width:50%
}
so when I set this in my css file
所以当我在我的 css 文件中设置它时
#map-canvas {
max-width:none;
}
The problem disappered! I looked all over google but couldn't find this answer.
问题消失了！我查遍了谷歌，但找不到这个答案。
回答by Ahmad Alaa
this style solved my problem
这种风格解决了我的问题
#map_canvas img { max-width: none !important; }
This forces the browser to allow the map to be as wide as it needs to be - the !importantessentially means "do not overwrite this style".
这迫使浏览器允许地图尽可能宽 -!important本质上意味着“不要覆盖这种样式”。
回答by Muthu17
The above solutions nothing works for me.
上述解决方案对我不起作用。
I have used display:nonefor my map, By changing it to visibility:hiddenit works fine for me.
我已经用于display:none我的地图，通过将其更改为visibility:hidden它对我来说很好用。
Change
改变
display:none
display:none
To
到
visibility:hidden
visibility:hidden
回答by Kike Jimenez
I solved it this way, my problem was in the rotation device, this solution works great:
我是这样解决的，我的问题出在旋转设备上，这个解决方案效果很好：
$scope.orientation = function(){
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
$interval(function(){
google.maps.event.trigger(map, 'resize');
},100);
});
};
$scope.orientation();
回答by hiqwertyhi
I had this issue pop up while working on other parts of my site so I didn't notice it right when it started. After going through every change I had made over the last hour, I came across the culprit:
我在我网站的其他部分工作时弹出了这个问题，所以我在它开始时没有注意到它。在经历了我在过去一个小时内所做的每一个更改之后，我发现了罪魁祸首：
div
{
[... other css ...]
overflow: auto;
}
in my css. I removed that and voila, it works. (Of course, I could just change the overflow attribute on my map div but I only need overflow: auto on a couple divs.) I'm sure there's a good reason why but I'm pretty new at this so I don't know. Anyways I hope this can help someone.
在我的 css 中。我删除了它，瞧，它有效。（当然，我可以更改地图 div 上的溢出属性，但我只需要在几个 div 上使用 overflow: auto 。）我确定有一个很好的理由，但我对此很陌生，所以我没有知道。无论如何，我希望这可以帮助某人。
