使用jquery调整Google Maps api v3 DIV的大小 - 瓷砖无法正常刷新

时间:2012-03-21 05:46:32

标签: google-maps google-maps-api-3

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

我使用的代码是:

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

有人可以提出任何想法吗?展开后,如果单击合约按钮,则会有一个闪存,其中所有切片都可以正常显示,因此看起来在收缩时会触发resize事件。在合同状态下,地图运作完美;围绕所有瓷砖平移刷新它们应该。

非常感谢任何帮助!

干杯!

1 个答案:

答案 0 :(得分:8)

animate()需要一些时间。

至少在动画完成时你必须触发地图的resize-event(另外你可以在每一步触发它),而不是在它开始时触发