Question

我的Google地图（V2）与JQuery（v1.4.4）结合使用时显示不正确，使用slideToggle功能来支持滑动面板（包含地图）。标记位于左上角的地图之外，仅显示地图的一半。没有面板，我对地图没有任何问题。

以下是以下链接的示例：map example under contact details

这里是JQuery（v1.4.4）代码

$(document).ready(function(){

        $(".btn-slide").click(function(){
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });

});

我的CSS：

a:focus {
        outline: none;
#panel {
        height: 250px;
        width: 650px;
        display: none;
        text-align: left;
}

.btn-slide {
        background: url(images/panel/white-arrow.gif) no-repeat right -50px;
        text-align: left;
        width: 650px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;

}

我的CSS包含display：none;而这似乎与阅读其他帖子有关。但是，我还没有找到一个可行的解决方案，希望有人可以帮助我。

干杯！ Tammo

Answer 1

我认为这是因为地图容器DOM元素在构造过程中必须具有已知大小才能正确设置地图大小。如果不知道（因为display:none），Google会映射猜测（或使用默认值），从而产生错误。

如果您更改逻辑以使地图可见，则隐藏document.load上的窗格可能会解决问题。

Answer 2

谢谢，刚刚尝试使用以下代码：

$(document).ready(function(){

    //Hide the panel on load
    $(".panel").hide(); 

    $(".btn-slide").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; 

    });

});

我现在已经在加载页面时隐藏了面板并取出了显示：我的CSS没有值，但遗憾的是没有运气。

在其他类似的帖子中，我遇到了map.checkResize（）;应嵌入该功能。它应该调整谷歌地图的大小，但它对我没有任何影响。也许我错误地应用了它。

还有其他建议吗？

干杯， Tammo

Answer 3

有同样的问题，但通过使用<iframe>来显示地图来避免它。 <iframe>是一个单独的页面，因此处理它自己的大小。

所以：

<div id="panel"><iframe id="idFrame" src="" margin/..../"></iframe>

$(".btn-slide").click( function() {
    $("#panel").slideToggle("slow");

    var location = "'.$url.'";
    var iframe = $(\'#idFrame\');

    $(iframe).attr(\'src\', location);
    return false;
});

为我工作

使用slideToggle功能时，Google Map显示不正确

3 个答案: