Question

我有一个带有展开按钮的Google地图，点按该按钮会展开地图的大小。问题是，完成此操作后，地图会显示灰色区域，就像它没有被重新绘制一样。

我尝试过google.maps.event.trigger(map, 'resize');，但似乎没有做任何事情。

我试过了：

<script type="text/javascript">
      jQuery(document).ready(function( $ ) {
          $("#expand").click(function(){
              $("#map").animate({height: '1000'}, 1500 );
              google.maps.event.trigger(map, 'resize');
          });
          });
</script>

如果单击地图上方的展开链接，地图会展开但会显示灰色区域，如果再次单击展开按钮，则会绘制灰色区域。如何在动画上触发？

我在Stack上搜索并搜索了这个问题的答案并尝试了所有建议，但仍然没有运气。我认为人们刚刚接受了答案，或者没有完全填写最终解决方案。

Answer 1

触发resize中的complete - 回调或progress - animate的回调。

oncomplete （动画完成后）：

$('#map').animate({height: '1000'}, 1500 ,
                  function(){google.maps.event.trigger(map, 'resize');});

onprogress （在动画的每一步中）：

$('#map').animate({height: '1000'},
                         {progress:function()
                                   {google.maps.event.trigger(map, 'resize');},
                          duration:1500} );

Google地图在调整大小时显示灰色区域

1 个答案: