Google地图在使用切换时未完全展开

我有两个彼此相邻的div。左边的那个包含Google Map，右边的是空的，我将它用作边栏。我创建了一个切换按钮，用于折叠边栏并扩展地图以覆盖视口的整个宽度。但是，Google Map div似乎并没有完全展开，并且始终将部分空间留空。当我只是扩展普通div时，不会出现此问题，因此我不知道这是否是Google Maps的问题？ Fiddle：Google地图在使用切换时未完全展开

$(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

来源

2014-06-13 user3716388

在提琴地图完美的大小调整这里。你可以张贴一些截图吗？蚂蚁发布您的浏览器信息 – LGVentura

@LGVentura我添加了一个链接到OP上的截图。无论我使用哪种浏览器，我都会遇到同样的问题。如果您增加小提琴结果宽度，那么同样的事情发生在那里。我在以下网站上上传了一个示例：[网站示例]（http://www.dogeglobal.com/toggle.html）。 – user3716388

你可以调整你的地图，而使用step:function(){}回调.animate()动画的#map宽度。请看：

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

我更新了你的提琴演示：

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

来源

2014-06-13 18:52:20 LGVentura

现在正常工作，谢谢！我可以问一下step：function和function有什么区别吗？试了两个，我似乎得到了同样的结果。 – user3716388

@ user3716388 step：function（）是.animate（）函数的回调函数。当你动画一些元素时，你可以在动画开始，结束，完成，失败，进度时调用一个函数。详细了解.animate（）http://api.jquery.com/animate/ – LGVentura

它看起来像地图是灰色的恰恰是尚未加载的一部分。如果您对其进行了浏览，它会正确加载。

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

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

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

来源

2014-06-13 16:31:31 possiblyLethal

Google地图在使用切换时未完全展开

回答

相关问题