3

我想将地图加载到灯箱中。因此，一旦触发链接，就会显示一个包含地图的灯箱。但是当我这样做时，除了我打开/关闭萤火虫（取决于它是否已经打开）时，一些图块不会加载，实际上不仅萤火虫，还有 Chrome 检查器和 IE 开发人员工具。我在具有相同尺寸和相同结构的页面（没有灯箱）上单独尝试过，一切正常。顺便说一句，我正在使用 OpenLayers-2.12。是调试问题还是什么？如果是，我该如何解决？

这是所有页面的代码：

<html>
<head>
        <script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">

            function longlat(lon,lat) {
                var fromProjection = new OpenLayers.Projection("EPSG:4326");
                var toProjection   = new OpenLayers.Projection("EPSG:900913");
                return new OpenLayers.LonLat(lon,lat).transform(fromProjection, toProjection);
            }

             function init_map() {
                var map = new OpenLayers.Map("basicMap");
                var mapnik         = new OpenLayers.Layer.OSM();
                var position       = longlat(28.8013,31.1711);
                var zoom           = 3; 
                var markers = new OpenLayers.Layer.Markers( "Markers" );
                map.addLayer(markers);
                var size = new OpenLayers.Size(21,25);
                var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);

                var location = new OpenLayers.Geometry.Point(28.8013, 31.1711).transform('EPSG:4326', 'EPSG:3857');

                var popup = new OpenLayers.Popup.FramedCloud('Popup',location.getBounds().getCenterLonLat(),new OpenLayers.Size(200,200),'<p>some text</p>',null,true);
                var marker = new OpenLayers.Marker(longlat(28.8013,31.1711),icon.clone());
                   marker.events.register('click',marker,function (evt) { 
                        map.addPopup(popup);
                        popup.show(); 
                   });
                   markers.addMarker(marker);


                    map.addLayer(mapnik);
                    map.setCenter(position, zoom);


              }

             </script>



        <script type="text/javascript">
                    jQuery(document).ready(function() {
                        init_map();
                        jQuery('#map_button').click(function() {
                            jQuery('.map_lightbox , .map_box , #basicMap').css('display','block');
                            jQuery('.map_lightbox').animate({opacity:0.8},300,'linear');
                            jQuery('.map_box').animate({opacity:1.0},500,'linear');

                            jQuery('.map_close').click(function() {
                                map_close();
                            });

                            jQuery('.map_lightbox').click(function() {
                                map_close();
                            });

                        });


                    });



                    function map_close() {
                        $('.map_container').children('object').remove();
                        $('.map_lightbox').animate({opacity:0},300,'linear',function() {
                            $('.map_lightbox , .map_box').css('display','none');
                        });
                    }
        </script>

        <style>
            .map_lightbox {
                    position: fixed;
                    top:0px;
                    left:0px;
                    width:100%;
                    height:100%;
                    background:#000000;
                    opacity:0;
                    filter:alpha(opacity=0);
                    z-index: 1000;
                    display:none;
                }

                .map_box {
                    position:fixed;
                    top:20%;
                    left:25%;
                    width:600px;
                    height:400px;
                    background :#f2f2f2;
                    z-index:1005;
                    padding:10px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border-radius:5px;
                    display:none;
                }

                .map_close {
                    cursor:pointer;
                    float:right;
                    margin-left:98%;
                    font-weight:bold;
                }

                .map_container {
                    margin-right:5px;
                }

                .map_container {
                    width:95%;
                    height:95%;
                    position:relative;
                    float:right;
                    margin-right:20px;
                    -moz-border-radius:3px;
                    border-radius:3px;
                    -webkit-border-radius:3px;
                }
        </style>
</head>
<body>
    <div class='map_lightbox'>
    </div>
    <div class='map_box'>
        <div class='map_close'>x</div>  
        <div class='map_container'>
            <div id='basicMap' style='width:100%;height:100%;display:none;position:absolute;'></div>
        </div>
    </div>
    <a href='javascript:void(0)' id='map_button' >full map</a>
</body>
</html>

谢谢

4

1 回答 1

0

这对最终结果有什么影响吗？ 

   OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;

此外，javacript 调试器是否在某处“中断”？也许是由于js错误？最后，您的“网络”面板是否显示任何非 http 响应代码 200 行（通常为红色）。然后您知道呼叫已拨打但失败。

于 2012-10-18T11:35:43.823 回答