61

有时谷歌地图部分带有其他区域变灰。有一个问题，如果我们启动 Firebug，图像确实会出现在那个灰色区域。不知道为什么会这样。任何人都经历过这个并找到了解决方案，请分享。

4

9 回答 9

81

更新 27/02/2020
不再需要手动触发调整大小事件。

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

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

也看看这里

于 2010-10-02T13:46:59.007 回答
36

如果您正在调整地图的DIV. 调整大小后，尝试调用gmap.checkResize()函数。

于 2010-10-11T14:50:11.033 回答
7

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

不要忘记将地图变量设置为全局；）干杯

于 2011-07-06T13:07:22.867 回答
7

我为部分加载的谷歌地图找到了一个简单的解决方案。通常它是由onLoad()在页面的其余部分（包括您的地图元素）未完全加载时调用引起的。这会导致部分地图加载。解决此问题的一种简单方法是更改​​您的onLoad正文标记操作。

老办法：

onload="initialize()"

新方式：

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

这会在 Google Javascript 访问正确的大小属性之前等待 2 秒。还要确保在尝试之前清除浏览器缓存；有时它会卡在那里:)

如果您想知道，这是我最重要的 Javascript 部分（完全如 Google 文档中所述，但因为我从 PHP 变量调用Latitudeand ，因此是 PHP 片段。Longitude

<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>
于 2012-06-15T04:46:10.397 回答
4

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

img { 
max-width:50% 
}

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

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

问题消失了！我在谷歌上找遍了，但找不到这个答案。

于 2014-08-01T18:37:12.967 回答
2

这种风格解决了我的问题

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

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

于 2015-10-20T08:18:49.657 回答
2

上述解决方案对我没有任何作用。

我已经使用display:none了我的地图，通过将其更改为visibility:hidden它对我来说效果很好。

改变

display:none

到

visibility:hidden

于 2018-07-03T08:10:27.397 回答
0

我这样解决了，我的问题出在旋转装置上，这个解决方案效果很好：

$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();
于 2016-01-15T11:32:03.617 回答
0

我在网站的其他部分工作时弹出了这个问题，所以当它开始时我没有注意到它。在经历了过去一个小时所做的所有更改之后，我遇到了罪魁祸首：

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

在我的 CSS 中。我删除了它，瞧，它有效。（当然，我可以只更改地图 div 上的溢出属性，但我只需要在几个 div 上使用 overflow: auto。）我确信这是有充分理由的，但我对此很陌生，所以我不知道。无论如何，我希望这可以帮助某人。

于 2017-04-27T02:06:47.927 回答