使用 jquery 调整 Google Maps api v3 DIV 的大小 - 磁贴未正确刷新

Posted 2023-03-12

【中文标题】使用 jquery 调整 Google Maps api v3 DIV 的大小 - 磁贴未正确刷新

【英文标题】：Resizing Google Maps api v3 DIV with jquery - tiles not refreshing properly

【发布时间】：2012-03-21 05:46:31

【问题描述】：

我正在使用 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>

任何人都可以提出任何想法吗？展开时，如果您单击合同按钮，则会出现一个闪烁，其中所有图块都正确可见，因此看起来在收缩时触发了调整大小事件。在收缩状态下，地图完美运行；平移所有图块都会刷新。

非常感谢您对此的任何帮助！

干杯！

【参考方案1】：

animate() 需要一些时间。

你必须至少在动画完成时触发地图的调整大小事件（另外你可以在每一步触发它），而不是在它开始时

【讨论】：

太棒了，非常感谢Molle博士。更改了代码以使用完整的回调函数，它很有魅力。干杯！

如果对您有用，您应该将此答案标记为“已接受”。点击左侧的勾号即可。