3

マップをライトボックスにロードしたい。したがって、リンクがトリガーされると、ライトボックスにマップが含まれていることが表示されます。しかし、それを行うと、実際にfirebugだけでなく、ChromeインスペクターとIE開発者ツールもfirebugを開いたり閉じたりする場合を除いて一部のタイルがロードされません（すでに開いているかどうかによって異なります）。同じサイズ、同じ構造のページ（ライトボックスなし）で個別に試しましたが、すべて正常に機能しています。ちなみに私は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 に答える