谷歌地图部分出现,灰色区域而不是来自谷歌服务器的图像
Posted
技术标签:
【中文标题】谷歌地图部分出现,灰色区域而不是来自谷歌服务器的图像【英文标题】:Google map comes partially, grey area comes instead of images from google server 【发布时间】:2011-04-19 19:26:06 【问题描述】:有时谷歌地图会部分显示其他区域变灰。有一个问题,如果我们启动 Firebug,图像确实会出现在那个灰色区域。不知道为什么会这样。 任何人都经历过这个并找到了解决方案,请分享。
【问题讨论】:
那么你到底在做什么导致这种行为? 它并不一致,只会发生一段时间。使用谷歌地图 api 的 v2。这有帮助吗... 正如this comment 中所建议的,将像素大小放入地图容器应该可以解决此问题。它对我有用 关于这个解决方案:#map_canvas img max-width: none !important;
之前由我们的一位同事提供,它正在解决在 chrome 和 Firefox 上打印动态谷歌地图的棘手问题。当然,我仍然对 Firefox 上的标记(部分可见)有问题。无论如何,有必要对这个解决方案进行解释,以及为什么浏览器会以这种特定方式运行。如果有人这样做,请随时写。
我注意到这个错误只发生在 IE 中。幸运的是,我可以让用户切换到 Chrome。
【参考方案1】:
27/02/2020 更新不再需要手动触发调整大小事件。
如果您使用的是 v3,请尝试
google.maps.event.trigger(map, "resize");
也可以看看here
【讨论】:
非常感谢 - 它帮助了我! ... 再次。谷歌搜索google maps api grey space
,得到了这个页面。惊人的。在我的例子中,我的地图对象是在另一个对象中实例化的,而不是全局的,所以请确保 map
引用了正确的对象!
2015 年!非常感谢:)
2015 年,您仍然可以得到它们!
有效,但我只需要调用 map.panTo(new google.maps.LatLng(lat, lng)) 即可恢复位置。同样在角度,两个调用都应该包含在 $timeout(function() //here );【参考方案2】:
如果您调整地图的DIV
的大小,可能会出现此错误。调整大小后,尝试调用gmap.checkResize()
函数。
【讨论】:
在 V3 中,checkResize 已折旧。 V3 的解决方案可以在blog.codebusters.pl/en/entry/google-maps-in-hidden-div 找到 是一个网站插件 来自评论:google.maps.event.trigger(
【参考方案3】:
您好,如果您在带有地图容器的 div 中使用切换,您可以在函数中调用 resizeMap
associated with the trigger:
$(".trigger").click(function()
$(".panel").toggle("fast");
$(this).toggleClass("active");
resizeMap();
return false;
然后 resizeMap();像这样
function resizeMap()
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
不要忘记将地图变量设置为全局变量;) 干杯
【讨论】:
【参考方案4】:我为部分加载的谷歌地图找到了一个简单的解决方案。通常它是由在页面的其余部分(包括您的地图元素)未完全加载时调用 onLoad()
引起的。这会导致部分地图加载。解决此问题的一种简单方法是更改您的 onLoad
正文标记操作。
老办法:
onload="initialize()"
新方式:
onLoad="setTimeout('initialize()', 2000);"
这会在 Google javascript 访问正确的尺寸属性之前等待 2 秒。还要确保在尝试之前清除浏览器缓存;有时它会卡在那里:)
如果您想知道,这是我最重要的 Javascript 部分(完全如 Google 文档中所述,但因为我从 php 变量调用 Latitude
和 Longitude
,因此是 PHP sn-ps。
<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>
【讨论】:
你是个天才!这应该是最佳答案。【参考方案5】:我只是想在这个讨论中补充一点,我也遇到了灰色条纹的问题,这与我需要使用 gmap.Resize 函数的问题不同,但它在我的 css 中。在我的 CSS 中,我有
img
max-width:50%
所以当我在我的 css 文件中设置它时
#map-canvas
max-width:none;
问题消失了!我在谷歌上找遍了,但找不到这个答案。
【讨论】:
【参考方案6】:这种风格解决了我的问题
#map_canvas img max-width: none !important;
这会强制浏览器允许地图尽可能宽 - !important
本质上意味着“不要覆盖此样式”。
【讨论】:
【参考方案7】:上述解决方案对我没有任何作用。
我在地图中使用了display:none
,将其更改为visibility:hidden
对我来说效果很好。
改变
display:none
到
visibility:hidden
【讨论】:
【参考方案8】:我是这样解决的,我的问题出在旋转装置上,这个解决方案效果很好:
$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();
【讨论】:
【参考方案9】:我在网站的其他部分工作时弹出了这个问题,所以在它开始时我没有注意到它。在经历了我在过去一个小时所做的所有更改之后,我遇到了罪魁祸首:
div
[... other css ...]
overflow: auto;
在我的 CSS 中。 我删除了它,瞧,它有效。 (当然,我可以只更改地图 div 上的溢出属性,但我只需要在几个 div 上使用 overflow: auto。)我敢肯定这是有充分理由的,但我对此很陌生,所以我不知道。无论如何,我希望这可以帮助某人。
【讨论】:
以上是关于谷歌地图部分出现,灰色区域而不是来自谷歌服务器的图像的主要内容,如果未能解决你的问题,请参考以下文章