OpenLayers：添加多個Google圖層會導致地圖大小調整後的白色屏幕

嘗試創建可動態填充整個頁面的OpenLayers地圖時，我遇到了問題。我最小化，然後最大化瀏覽器窗口地圖變爲空白。實際上，它可以在任何窗口調整大小後發生，但最小化/最大化每次都會發生。我使用Firefox 4，但所有其他瀏覽器中都出現相同的錯誤。OpenLayers：添加多個Google圖層會導致地圖大小調整後的白色屏幕

經過一番實驗後，我發現只有在向地圖添加多個Google圖層時纔會發生這種情況。 GoogleStreets獨自完美運作; GoogleStreets + GoogleHybrid（或任何其他配對）會導致白屏。有趣的是，如果我在調整窗口大小之前切換層次，一切正常。

我在這裏做錯了什麼？檢查下面的代碼（它可以在任何本地機器上運行，所有庫都來自CDN）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Mappa Mundi</title> 

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 

     <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css"/> 
     <link rel="stylesheet" href="http://openlayers.org/api/theme/default/google.css" type="text/css"/> 

     <script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false" type="text/javascript"></script> 

     <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> 

     <style type="text/css"> 
      body { 
       font-size: 0.75em; font-family: Verdana; 
       margin: 0; padding: 0; 
      } 

      .b-map-openlayers { 
       width: 100%; 
       height: 100%; 
      } 
     </style> 
    </head> 

    <body> 

     <div id="map-openlayers" class="b-map-openlayers"></div> 


     <script type="text/javascript"> 
     /*<![CDATA[*/ 

      MapTest = function(cfg) 
      { 
       var self = this; 
       var i; 

       self.$mapContainer = $('#'+cfg.containerId); 

       self.updateContainerSize(); 

       // Creating map 
       self.map = new OpenLayers.Map(cfg.containerId, { 
         controls:[] 
       }); 

       // Handle window resize event 
       $(window).bind('resize', self, self.updateMapSize); 

       var gmap = new OpenLayers.Layer.Google("Google: Streets", { 
         numZoomLevels: 20, 
         sphericalMercator: true 
       }); 

       var ghyb = new OpenLayers.Layer.Google("Google Hybrid", { 
         type: google.maps.MapTypeId.HYBRID, 
         numZoomLevels: 20, 
         sphericalMercator: true 
       }); 

       // !!! This is the source of the problem. Remove ghyb - and everything's fine 
       self.map.addLayers([gmap, ghyb]); 

       self.map.setCenter(new OpenLayers.LonLat(0, 0), 5); 

       self.map.addControl(new OpenLayers.Control.LayerSwitcher({roundedCornerColor: '#3f3f3f'})); 
       self.map.addControl(new OpenLayers.Control.DragPan()); 
       self.map.addControl(new OpenLayers.Control.PanZoomBar()); 
       self.map.addControl(new OpenLayers.Control.Navigation()); 
      }; 

      MapTest.prototype = 
      { 
       updateContainerSize: function() 
       { 
        var self = this; 

        var mapHeight = $(window).height(); 
        var mapWidth = $(window).width(); 

        self.$mapContainer.height(mapHeight); 
        self.$mapContainer.width(mapWidth); 
       }, 

       updateMapSize: function(event) 
       { 
        var self = event.data; 

        self.updateContainerSize(); 
        self.map.updateSize(); 
       } 
      }; 

      $(document).ready(function() { 
       var mapTest = new MapTest({ 
         containerId: 'map-openlayers' 
       }); 
      }); 

     /*]]>*/ 
     </script> 
    </body> 
</html>

來源

2011-05-21 Sergey Simonyan

在Chrome 11.x和Chrome 13.x中都能按預期工作。

在FireFox 4中確實沒有顯示圖像。我收到一條消息'Helaas hebben we hier geen beelden van '，這意味着像Unfortunately we don't have any imagery of this。

有2個全屏例子爲的OpenLayers：

也許你可以使用那些爲出發點，並添加谷歌層，看是否使任何差異。

或者，您可以嘗試從Google Maps V3示例開始，然後將其全屏顯示。它可以讓你在4個谷歌地圖基礎圖層之間切換，類似於你想要做的。

http://openlayers.org/dev/examples/google-v3.html

我沒有去嘗試這些東西我自己在這一刻的時間，但我希望這可以幫助你找到一個解決您的問題。

來源

2011-05-21 07:45:41

謝謝你的時間，Wouter。我設法讓我的例子工作。 – 2011-05-21 22:41:42

對不起。按下意外進入。 :)以下是我所做的：我已將http://openlayers.org/api/OpenLayers.js的鏈接更改爲http://openlayers.org/dev/OpenLayers.js的OpenLayers.js。即我已經從穩定切換到開發版本。顯然，它是一個錯誤（我只是沒有在bugtracker中找到它），並且它在dev OpenLayers中已經修復。我想我必須切換到它然後...再次感謝你。 :) – 2011-05-21 22:44:40

感謝您反饋解決方法！ – 2011-05-30 09:52:13

OpenLayers：添加多個Google圖層會導致地圖大小調整後的白色屏幕

回答

相關問題