Google 在 Bootstrap 轮播中作为背景的地图未完全显示

Question

我尝试在 Bootstap carousel 中添加一个地图作为项目，方法与本主题相同 Google map with bootstrap 3 carousel bug? ，当地图在第一个项目（活动）上时，地图显示正确，但是当地图放在第二个位置(2nd item,3rd....)时，地图没有完全显示。

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

感谢您的帮助！！！

Answer 1

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

滑动后可以调用resize事件

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

Demo

Google 在 Bootstrap 轮播中作为背景的地图未完全显示

Google map as background in Bootstrap carousel not displaying entirely

css

jquery

google-maps

carousel

twitter-bootstrap