jquery - 谷歌地图作为 Bootstrap 轮播中的背景不完全显示

Question

我尝试以与本主题相同的方式在 Bootstap 轮播中添加 map 作为元素 Google map with bootstrap 3 carousel bug? ,本地图在第一个item(active)时, map 显示正确,但是本地图放在第二个位置(2nd item,3rd....)时, map 显示不完整。

这里是解释问题所在的演示: http://www.bootply.com/9nAZmtYLOM# 这是正确的演示: http://www.bootply.com/YcaTxtftSW

感谢您的帮助!!!

Answer 1

由于 .item 在设置 map 时隐藏，您必须在该部分变为可见时调整 map 的大小

滑动后可以调用resize事件

 $('#myCarousel').on('slid.bs.carousel', function (e) {
    if($('.item.active').find("#map-canvas").length == 1) {
      google.maps.event.trigger(map, "resize");
    }
 });

Demo