Question

您好我有这个问题，当我加载一个隐藏div中的地图的页面时，地图仅部分地加载地图的左上角1/4，当地图加载时，地图如何渲染得很好容器没有隐藏。

我准备了这个jsFiddle示例页面：

$("#toggleAdvanced").click(function(){
    $("#advancedSearch").slideToggle( "fast", function() {
        google.maps.event.trigger(map, 'resize');
    });
});

如果您尝试，请单击“单击”文本，您将看到刚刚部分加载的地图，如何尝试从#map_wrapper更改CSS {display：none;到#map_wrapper {display：block;并且地图点击hiden和show按钮完美无缺。

正如你所看到的，我在幻灯片效果之后触发了google.maps.event.trigger（map，'resize'）事件，因此它可以正常工作......（正如我发现的其他问题中所述）

怎么了？或者我该如何解决这个问题？

Answer 1

您在未显示的div上过早地调用初始化函数，这意味着当jquery显示div时，此过程与地图存在冲突。

在这里查看小提琴。 http://jsfiddle.net/Z5AGP/2/

$(document).ready(function() {


        $("#toggleMap").click(function(){
            $("#map_wrapper").slideToggle( "fast", function() {
                initialize();
                google.maps.event.trigger(map, 'resize');
            });
        });
    });

Answer 2

谢谢丹尼尔乔丹，我是对的，在每个div显示/隐藏之后重置的所有内容都被重置，为了解决它我添加了一个变量来检查地图是否已经初始化并且现在正常是正确的。

var mapInit = 0;
$(document).ready(function() {
    $("#toggleMap").click(function(){
        $("#map_wrapper").slideToggle( "fast", function() {
            if(mapInit == 0) { initialize(); mapInit = 1; }
            google.maps.event.trigger(map, 'resize');
        });
    });
});

这是本主题的解决方案

如果地图已初始化（如开头），为什么调用事件调整大小不起作用？（这似乎是一个错误，像这样的许多其他问题提到，也称事件并没有发生。

此致

谷歌地图只是部分显示

2 个答案: