Javascript GoMap-显示隐藏div后调整大小 $（函数（）{ //初始化映射 }); $（文档）.ready（函数（）{ $（'.showmap'）。单击（函数（）{ $（“#映射”）.slideToggle（）； google.maps.event.trigger（映射，'resize'）； }); });

我相信你现在已经知道了。我正在尝试打开和关闭谷歌地图。问题在于，单击showMap按钮后的地图在此网站上显示如下：

---

有人能指出我做错了什么吗？我希望地图显示在整个分区上。如果你看那张图片的底部，你会注意到地图文案和品牌stff在正确的位置，但地图不是。它不会移动到div的底部。它只是跳回到图片中的位置。

看起来您调用resize的时间太早了。尝试这样做：

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

这将使调整大小功能在滑动切换完成后调用

---

如果上述操作不起作用，解决方法是将map div包含在另一个div中，并隐藏溢出，然后滑动切换父div，而不是map div。看起来您调用resize的时间太早了。尝试这样做：

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

这将使调整大小功能在滑动切换完成后调用

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