Question

在尝试创建一个动态填充整个页面的OpenLayers地图时，我遇到了一个问题。 Ater我最小化然后最大化浏览器窗口地图变成空白。实际上，它可能在任何窗口调整大小后发生，但最小化/最大化每次都会发挥作用。我使用Firefox 4，但所有其他浏览器都会出现同样的错误。

经过一些实验后，我发现只有在地图中添加多个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>

Answer 1

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

在FireFox 4中确实没有显示图像。我收到了一条消息'Helaas hebben we hier geen beelden van '，这意味着Unfortunately we don't have any imagery of this。

OpenLayers有2个全屏示例：

http://openlayers.org/dev/examples/fullScreen.html
http://openlayers.org/dev/examples/fullScreen2.html

也许您可以将这些作为起点，然后添加Google图层，看看是否有任何区别。

或者，您可以尝试从Google Maps V3示例开始，然后将其设置为全屏。它允许您在4个谷歌地图基础层之间切换，类似于您尝试做的。

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

此刻我没有时间自己尝试这些东西，但我希望这可以帮助您找到问题的解决方案。

OpenLayers：在地图调整大小后，添加多个Google图层会导致白屏

1 个答案: