使用 Toggle 时 Google 地图未完全展开答案

【问题标题】：Google Map doesn't fully expand when using Toggle使用 Toggle 时 Google 地图未完全展开
【发布时间】：2014-08-04 04:48:32
【问题描述】：

我有两个相邻的 div。左边的一个包含谷歌地图，而右边的一个是空的，我将其用作侧边栏。我创建了一个切换按钮，它可以折叠侧边栏并展开地图以覆盖视口的整个宽度。但是，Google Map div 似乎并没有完全展开，并且总是将部分空间留空。当我只是扩展一个普通的 div 时不会出现这个问题，所以我想知道这是否是谷歌地图的问题？ Fiddle:

$(document).ready(function () {
    $("#toggle").click(function () {
       $("#side_bar").animate({
           width: 'toggle'
       });
       var value = $("#map")[0].style.width !== "100vw" ? '100vw' : '80vw';
       $("#map").animate({
           width: value
       });
    });
});

我在所有浏览器上都遇到了同样的问题，最新版本：

Image Example

【问题讨论】：

在你的小提琴中，地图在这里调整大小完美。你能贴一些截图吗？ ant 发布您的浏览器信息
@LGVentura 我在 OP 上添加了一个屏幕截图的链接。无论我使用哪种浏览器，我都会遇到同样的问题。如果你增加 Fiddle Result 的宽度，同样的事情也会发生在那里。我在以下站点上传了一个示例：Website Example.

标签： jquery css google-maps-api-3 toggle expand

【解决方案1】：

看起来地图的灰色部分尚未加载。如果您将其移至它，它会正确加载。

切换后尝试刷新谷歌地图：

google.maps.event.trigger(map, 'resize');

(thanks to this answer for the google maps refresh script)

【讨论】：

【解决方案2】：

您可以调整地图大小，同时使用.animate() 的step:function(){} 回调为#map 宽度设置动画。看看：

$("#map").animate({
    width:value
    },{step:function(){
        google.maps.event.trigger(map,'resize');
    },
});

我将你的小提琴更新为演示：

http://jsfiddle.net/XnDsS/1/

【讨论】：

现在可以正常工作了，谢谢！请问step:function和function有什么区别？两者都试过了，我似乎得到了相同的结果。
@user3716388 step:function() 是 .animate() 函数的回调。当您为某些元素设置动画时，您可以在动画开始、结束、完成、失败、进度时调用函数。阅读更多关于 .animate() api.jquery.com/animate