javascript - GoMap - 显示隐藏的 div 后调整大小

Question

    <a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>
<script type="text/javascript">
$(function() { 
 //initialise map
});

$(document).ready(function(){
    $('.showmap').click(function(){
    $("#map").slideToggle();
    google.maps.event.trigger(map, 'resize');
   });
});
</script>

我相信你现在已经能看出来了。我正在尝试打开和关闭谷歌地图。问题是单击 showMap 按钮后的 map 在该网站上显示如下:

http://forum.jquery.com/viewImage.do?fileId=14737000003424984&forumGroupId=14737000000003003

有人可以指出我做错了什么吗？我希望 map 显示在整个 div 上。如果您查看该图片的底部，您会发现 map 文案和品牌内容位于正确的位置，但 map 却不是。它不会将事件移动到 div 的底部。它只是跳回图片中的位置。

Answer 1

看起来您似乎过早地调用了调整大小。尝试这样做:

$("#map").slideToggle('slow', function() {
    google.maps.event.trigger(map, 'resize');
});

这将使调整大小函数在滑动切换完成后被调用。

如果上述方法不起作用，解决方法是将 map div 包含在另一个 div 中，并 overflow hidden ，然后滑动切换父 div 而不是 map div