Question

<div style="display: none;">
        <div id="location<?php echo $r->id ?>">

            <?php echo $r->address; ?>, <?php echo $r->city; ?>, <?php echo $r->province; ?>

            <h3 class="sub">Map of Location</h3>
                <?php
                    $CI->conjunction->showMap($r->id, $r->lat, $r->lon, $r->postal, 'map_canvas');
                ?>  
            <div id="map_canvas" style="width: 250px; height: 250px;"></div>            
        </div>
    </div>

上面的代码是我用来显示隐藏的DIV的代码。然后我用

$('a#inline').fancybox({
      'autoScale': true
    , 'autoDimensions': true
    , 'centerOnScroll': true
});

致电Fancybox以显示内容。但是，Google地图始终会破坏灯箱并默认显示。

是否有合理的解决方法强制地图隐藏，直到DIV环绕它显示？

Answer 1

我在浏览器视口中遇到了类似的问题：解决方法是通过URL将其拉到带有fancybox的iframe中。

        $("a#inline").fancybox({
            'width'             : '95%',
            'height'            : '95%',
            'autoScale'         : false,
            'transitionIn'      : 'slow',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });

<a id="various5" href="http://mappage">Link</a>

这是不理想的，因为你可以看到，但它是一种解决方法。

Answer 2

不太确定如何解决此问题，但您可能需要查看此插件：

http://colorpowered.com/colorbox/

我正在使用fancybox一段时间，直到我意识到IE挂起，直到页面上的所有图像都被加载。也许看看你是否使用这个插件得到了相同的结果？

带有Google Maps Inline Div的FancyBox

2 个答案: