OpenLayers: добавление более одного слоя Google приводит к белому экрану после изменения размера карты - PullRequest
Новая
       19

OpenLayers: добавление более одного слоя Google приводит к белому экрану после изменения размера карты

2 голосов
/ 21 мая 2011

При попытке создать карту OpenLayers, которая бы динамически заполняла всю страницу, я столкнулся с проблемой.После того, как я сверну, а затем разверну окно браузера, карта станет пустой.На самом деле, это может произойти после любого изменения размера окна, но минимизация / максимизация делает свое дело каждый раз.Я использую 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>

1 Ответ

0 голосов
/ 21 мая 2011

В 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:

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

Может быть, вы можете использовать их в качестве отправной точки и добавить слои Google, чтобы увидеть, если это имеет какое-либо значение.

Кроме того, вы можете попробовать начать с примера Google Maps V3 и сделать его одним полноэкранным.Он позволяет переключаться между 4 базовыми слоями карт Google, аналогично тому, что вы пытаетесь сделать.

У меня нет времениПопробуйте сами в этот момент, но я надеюсь, что это поможет вам найти решение вашей проблемы.

...