Question

我尝试在Bootstap轮播中添加一个地图作为项目，与本主题Google map with bootstrap 3 carousel bug?中的方式相同，当地图位于第一个项目（活动）时，地图显示正确，但是当地图放在第二个位置（第2个项目，第3个......），地图不会完全显示。

这是一个解释出现问题的演示： 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

谷歌地图作为背景在Bootstrap轮播没有完全显示

1 个答案: