Google maps OpenLayers：添加多个Google图层会在地图调整大小后显示白色屏幕_Google Maps_Openlayers

Google maps OpenLayers：添加多个Google图层会在地图调整大小后显示白色屏幕

google-maps openlayers

Google maps OpenLayers：添加多个Google图层会在地图调整大小后显示白色屏幕,google-maps,openlayers,Google Maps,Openlayers,当我试图创建一个OpenLayers映射来动态填充整个页面时，我遇到了一个问题。当我最小化然后最大化浏览器窗口时，地图变为空白。实际上，它可以在任何窗口调整大小后发生，但是最小化/最大化每次都会起作用。我使用Firefox4，但在所有其他浏览器中都会出现相同的错误经过一段时间的实验，我发现只有当我在地图上添加多个谷歌图层时，这种情况才会发生。只有谷歌才能完美地工作；GoogleStreets+GoogleHybrid或任何其他组合都会产生白色屏幕有趣的是，若我在调整窗口大小之前在层之间切换，

当我试图创建一个OpenLayers映射来动态填充整个页面时，我遇到了一个问题。当我最小化然后最大化浏览器窗口时，地图变为空白。实际上，它可以在任何窗口调整大小后发生，但是最小化/最大化每次都会起作用。我使用Firefox4，但在所有其他浏览器中都会出现相同的错误

经过一段时间的实验，我发现只有当我在地图上添加多个谷歌图层时，这种情况才会发生。只有谷歌才能完美地工作；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>

在Chrome11.x和Chrome13.x中，它都能正常工作

在Firefox4中，图像确实不会显示。我收到一条信息“Helaas hebben we hier geen beelden van”，意思是很不幸，我们没有这方面的任何图像

OpenLayers有两个全屏示例：

也许你可以用这些作为起点，添加谷歌图层，看看这是否有什么不同

或者，您可以尝试从GoogleMapsV3示例开始，并使其全屏显示。它允许您在4个谷歌地图基本层之间切换，这与您尝试的操作类似

我现在没有时间亲自尝试这些东西，但我希望这能帮助您找到解决问题的方法。

在Chrome 11.x和Chrome 13.x中，它都能按预期工作

在Firefox4中，图像确实不会显示。我收到一条信息“Helaas hebben we hier geen beelden van”，意思是很不幸，我们没有这方面的任何图像

OpenLayers有两个全屏示例：

也许你可以用这些作为起点，添加谷歌图层，看看这是否有什么不同

或者，您可以尝试从GoogleMapsV3示例开始，并使其全屏显示。它允许您在4个谷歌地图基本层之间切换，这与您尝试的操作类似

我现在没有时间亲自尝试这些东西，但我希望这能帮助您找到解决问题的方法。

谢谢您的时间，沃特。我设法让我的榜样起作用了。对不起。意外按下回车键：以下是我所做的：我将OpenLayers.js的链接从更改为。也就是说，我已经从稳定版本切换到开发版本。很明显，这是一个bug，我只是在bugtracker中没有找到它，它在devOpenLayers中得到了修复。我想我得换成它了。。。再次感谢你谢谢你抽出时间，沃特。我设法让我的榜样起作用了。对不起。意外按下回车键：以下是我所做的：我将OpenLayers.js的链接从更改为。也就是说，我已经从稳定版本切换到开发版本。很明显，这是一个bug，我只是在bugtracker中没有找到它，它在devOpenLayers中得到了修复。我想我得换成它了。。。再次感谢你