jquery - 谷歌地图只显示部分

Question

你好，我遇到了这个问题，当我加载一个包含隐藏 div 中的 map 的页面时， map 只加载了一部分，即 map 左上角的 1/4，但是当它加载时 map 渲染得很好容器未隐藏。

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

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

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

如果您尝试，请单击“单击”文本，您将看到 map 只是部分加载，如何尝试更改 #map_wrapper { display: none; 中的 CSS？ } to #map_wrapper { 显示: block ； } map 点击隐藏和显示按钮效果很好。

如您所见，我在滑动效果后触发了 google.maps.event.trigger(map, 'resize') 事件，因此它应该可以正常工作...(如我发现的其他问题所述)

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

Answer 1

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

在这里查看 fiddle 。 http://jsfiddle.net/Z5AGP/2/

$(document).ready(function() {


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