google-maps - 使用 jquery 调整 Google Maps api v3 DIV 的大小 - 图 block 无法正确刷新

Question

我正在使用 Google Maps api v3 创建一个可以调整大小的 map (使用 jQuery 切换来扩展和收缩 div)。通过研究，我发现我应该调用 google.maps.event.trigger(map, 'resize');调整 map 大小时。我已经这样做了，但我仍然遇到刷新图 block 的问题。

我使用的代码是:

<script>
document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+ expand map</a>');

/* Expand map_canvas DIV */

jQuery('#expandMap').toggle(function(){
jQuery('a#expandMap').text('- contract map');
jQuery('a#expandMap').attr('title', 'Contract the map');
jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
}, function(){
jQuery('a#expandMap').text('+ expand map');
jQuery('a#expandMap').attr('title', 'Expand the map');
jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
});

/* Expand map_canvas DIV End */
</script>

有人可以提出任何想法吗？展开时，如果单击收缩按钮，则会出现闪烁，所有图 block 都正确可见，因此看起来收缩时会触发调整大小事件。在收缩状态下， map 运行良好；平移所有图 block 都会按预期刷新。

非常感谢对此提供的任何帮助!

干杯!

Answer 1

animate() 需要一些时间。

您必须至少在动画完成时触发 map 的调整大小事件(此外，您可以在每个步骤中触发它)，而不是在动画开始时触发