Question

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

Answer 1

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

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

另请查看here

Answer 2

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

Answer 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() );
}

不要忘记将map变量设置为global;）欢呼声

Answer 4

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

旧方式：

onload="initialize()"

新方式：

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

这等待Google Javascript访问正确尺寸属性前2秒。还要确保在尝试之前清除浏览器缓存;有时会卡在那里：）

这是我最好的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>

Answer 5

我只是想在这个讨论中添加灰色条纹这个问题，并且这个问题与我需要使用gmap.Resize函数的问题相同，但它在我的CSS中。在我的CSS中我有

img { 
max-width:50% 
}

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

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

问题消失了！我看了一遍谷歌，但无法找到答案。

Answer 6

这种风格解决了我的问题

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

这会强制浏览器允许地图尽可能宽 - !important本质上意味着＆＃34;不要覆盖此样式＆＃34;。

Answer 7

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

我已将<?php $connect= mysqli_connect("localhost","root","","result"); $jsondata=file_get_contents("result.json"); $json= json_decode($jsondata,true); $results=$json['results']; foreach($results as $key => $result){ foreach($result["tickets"] as $k => $v){ $sql="INSERT into event(name,url,imageUrl,dateCreated,eventName,addressLine1,addressLine2,ticketName,price) VALUES('".$result["name"]."','".$result["url"]."','".$result["imageUrl"]."','".$result["dateCreated"]."','".$result["venue"]["name"]."','".$result["venue"]["addressLine1"]."','".$result["venue"]["addressLine2"]."','".$v["name"]."','".$v["price"]."')";` mysqli_query($connect,$sql); } } echo "events data inserted"; ?>用于地图，将其更改为display:none对我来说很好。

更改

visibility:hidden

收件人

display:none

Answer 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();

Answer 9

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

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

在我的CSS中。我删除了它，瞧，它有效。（当然，我可以在我的地图div上更改overflow属性但是我只需要溢出：自动对几个div。）我确定有一个很好的理由但是我很新，所以我不知道知道。无论如何，我希望这可以帮助别人。

谷歌地图部分来自灰色区域，而不是来自谷歌服务器的图像

9 个答案: