谷歌地圖部分來自灰色區域，而不是來自谷歌服務器的圖像

谷歌地圖有時會部分與其他區域變灰。有一個問題，如果我們啓動Firebug，圖像確實來自灰色區域。不知道爲什麼會發生這種情況。任何人都曾經歷過這個並找到解決方案，請分享。谷歌地圖部分來自灰色區域，而不是來自谷歌服務器的圖像

來源

2010-10-01 Vishwanath

那麼究竟是什麼導致這種行爲？ – slugster 2010-10-01 11:15:02

它不一致，只發生一段時間。使用谷歌地圖API的V2。這是否有幫助... – Vishwanath 2010-10-01 12:12:05

正如[本評論]（http://stackoverflow.com/a/9246072/877353）中所建議的那樣，將大小映射到地圖容器應該可以解決此問題。它爲我做了 – 2015-08-20 12:41:41

此錯誤可能會發生，如果你調整地圖的DIV。調整大小後，請嘗試撥打gmap.checkResize()函數。

來源

2010-10-11 14:50:11

+14

在V3中，checkResize已折舊。 V3的解決方案可以在http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div – wooncherk 2013-02-18 07:06:06

找到一個網站的插件 – 2017-05-22 13:49:26

從評論：'google.maps.event.trigger （''，「調整大小」）' – 2017-12-20 13:48:38

如果您正在使用V3嘗試

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

而且看看here

來源

2010-10-02 13:46:59

非常感謝 - 它幫助了我！ – Eamorr 2011-06-17 20:48:25

...再次。谷歌搜索谷歌地圖api灰色空間，並得到這個網頁。真棒。在我的情況下，我的地圖對象是在另一個對象內部實例化的，而不是全局的，所以確保'map'引用正確的對象！ – 2011-12-09 15:30:07

謝謝，2013年仍然像魅力一樣！ – 2013-08-18 15:53:43

嗨，如果你在一個地圖容器用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-06 13:07:22 MRodrigues

好工作它的工作，謝謝你 – 2014-09-17 13:14:37

我發現了部分加載谷歌地圖一個簡單的解決方案。通常這是由於在頁面的其餘部分（包括地圖元素）未完全加載時調用onLoad()所致。這會導致部分地圖加載。解決此問題的一個簡單方法是更改您的身體標記操作。

老辦法：

onload="initialize()"

的新方法：

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

此等待2秒鐘，谷歌的JavaScript訪問正確的大小屬性之前。另外請確保在嘗試之前清除瀏覽器緩存;有時它被卡在那裏:)

這是我的首要JavaScript部分的情況下，你想知道（完全是在谷歌文檔中描述，而是因爲我打電話從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>

來源

2012-06-15 04:46:10 Milan

你是一個genuis！這應該是最好的答案。 – Lan 2015-12-25 01:25:10

我只想添加到這個討論，我有這個問題，灰色條紋以及這與wasen't同樣的問題，我需要使用gmap.Resize函數，但它是在我的CSS在我的CSS我有

img { 
max-width:50% 
}

所以當我將其設置在我的css文件中時

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

問題消失了！我看了谷歌，但無法找到這個答案。

來源

2014-08-01 18:37:12 Izekid

這種風格的解決我的問題

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

這迫使瀏覽器，讓地圖一樣寬，它需要 - 在!important實際上意味着「不覆蓋這種風格」。

來源

2015-10-20 08:18:49

我解決了它這種方式，我的問題是在旋轉裝置，這種解決方案的偉大工程：

$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-15 11:32:03

我有這個問題上彈出我的網站的其他地方工作時，所以我沒注意到它正確的時候開始。在我的CSS

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

：通過我在最後一小時的每次改變會後，我碰到的罪魁禍首。我刪除了，瞧，它的作品。（當然，我可以改變我的地圖div上的溢出屬性，但我只需要在多個div上使用overflow：auto。）我確定有一個很好的理由，但我很新，所以我不知道知道。無論如何，我希望這可以幫助某人。

來源

2017-04-27 02:06:47 hiqwertyhi

谷歌地圖部分來自灰色區域，而不是來自谷歌服務器的圖像

回答

相關問題