JavaScript-Google地图部分出现,灰色区域出现,而不是Google的图像

有时,谷歌地图会与其他区域一起变灰。 有一个问题,如果我们启动Firebug,图像确实会进入该灰色区域。 不知道为什么会这样。任何人都曾经历过这种情况并找到了解决方案,请分享。

9个解决方案
79 votes

如果您使用的是v3,请尝试

google.maps.event.trigger(map, "resize");

也看看这里

Argiropoulos Stavros answered 2019-10-09T13:49:42Z
36 votes

如果要调整地图的DIV的大小,则会发生此错误。调整大小后,尝试调用gmap.checkResize()函数。

Hitman_99 answered 2019-10-09T13:48:57Z
7 votes

您好,如果您在带有地图容器的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() );
}

不要忘记将map变量设置为global;)干杯

MRodrigues answered 2019-10-09T13:50:35Z
7 votes

我找到了部分加载的Google地图的简单解决方案。 通常,这是由于在页面的其余部分(包括您的map元素)未完全加载时被调用onLoad()引起的。 这会导致部分地图加载。 解决此问题的一种简单方法是更改您的Latitude身体标签动作。

旧方法:

onload="initialize()"

新方法:

onLoad="setTimeout('initialize()', 2000);"

这需要等待2秒钟,然后Google Javascript才能访问正确的size属性。 在尝试之前,请确保清除浏览器缓存; 有时它卡在那里:)

如果您想知道的话,这是我最喜欢的Javascript部分(完全如Google文档中所述,但是因为我从PHP变量(因此是PHP代码段)调用LatitudeLongitude

<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>
Milan answered 2019-10-09T13:51:33Z
4 votes

我只是想在这个讨论中补充一点,我也遇到了带有灰色条纹的问题,这与我使用gmap.Resize函数所需的问题不同,但它在我的CSS中。 在我的CSS中

img { 
max-width:50% 
}

所以当我在css文件中设置它时

#map-canvas { 
max-width:none;
}

问题消失了! 我在Google各处浏览,但找不到此答案。

Izekid answered 2019-10-09T13:52:18Z
1 votes

这种风格解决了我的问题

#map_canvas img { max-width: none !important; }

这迫使浏览器允许地图尽可能地宽-!important本质上意味着“不要覆盖此样式”。

Ahmad Alaa answered 2019-10-09T13:52:50Z
1 votes

上面的解决方案对我没有用。

我已将visibility:hidden用于地图,将其更改为visibility:hidden,对我来说效果很好。

更改

visibility:hidden

visibility:hidden

Muthu17 answered 2019-10-09T13:53:52Z
0 votes

我这样解决了,我的问题出在旋转设备上,这种解决方案效果很好:

$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();
Kike Jimenez answered 2019-10-09T13:54:20Z
0 votes

在网站的其他部分上工作时,我会弹出此问题,因此启动时我没注意到。 经过最后一个小时的所有更改后,我遇到了罪魁祸首:

div
{
    [... other css ...]
    overflow: auto;
}

在我的CSS中。我删除了,瞧,它起作用了。 (当然,我可以只更改地图div上的overflow属性,但我只需要overflow:在几个div上自动。)我确定有充分的理由为什么我对此很陌生,所以我不 知道。 无论如何,我希望这可以帮助某人。

hiqwertyhi answered 2019-10-09T13:54:59Z
translate from https://stackoverflow.com:/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server