Question

我有两个div彼此相邻。左边的那个包含Google Map，而右边的那个是空的，我用它作为侧边栏。我创建了一个切换按钮，折叠侧边栏并展开地图以覆盖视口的整个宽度。但是，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

Answer 1

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

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

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

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

Answer 2

看起来地图的灰色部分尚未加载。如果您选中它，它会正确加载。

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

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

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

使用切换时，Google地图无法完全展开

2 个答案: