0

您好，我有这个问题，当我加载一个带有隐藏 div 中的地图的页面时，地图只加载了一部分，地图的左上角 1/4，但是当它与容器一起加载时地图渲染得很好隐。

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

http://jsfiddle.net/Z5AGP/2/

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

如果你尝试，点击“点击”文本，你会看到地图只是部分加载，如何尝试从 #map_wrapper { display: none; 更改 CSS } 到 #map_wrapper { 显示：块；和地图点击隐藏和显示按钮完美。

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

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

4

2 回答 2

2

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

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

$(document).ready(function() {


        $("#toggleMap").click(function(){
            $("#map_wrapper").slideToggle( "fast", function() {
                initialize();
                google.maps.event.trigger(map, 'resize');
            });
        });
    });
于 2013-04-20T17:53:01.280 回答
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');
        });
    });
});

这就是这个主题的解决方案

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

问候

于 2013-04-27T20:03:57.187 回答