Google地图作为Bootstrap旋转木马上的背景并未完全显示

我尝试在Bootstap旋转木马中以与本主题Google map with bootstrap 3 carousel bug?相同的方式添加地图作为项目，当地图位于第一项（活动）时，地图为正确显示，但是当地图放置在第二个位置（第二个项目，第三个....）时，地图不会完全显示。Google地图作为Bootstrap旋转木马上的背景并未完全显示

这里是演示讲解什么错： http://www.bootply.com/9nAZmtYLOM# 在这里，这是怎么回事权的演示： http://www.bootply.com/YcaTxtftSW

感谢您的帮助！

来源

2015-02-23 Alex

地图需要调用resize事件元素尺寸正确呈现，但隐藏元素没有尺寸。暴露时可以尝试使用地图刷新方法。请参阅文档 – charlietfl 2015-02-23 13:24:53

由于.item时隐时现的地图设置，你将不得不调整地图时的部分变得可见

您可以幻灯片之后

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

Demo

来源

2015-02-23 13:33:55 anpsmn

谢谢我试过这种方法，但不起作用$（'＃myCarousel'）。（'slide.bs.carousel'，function（e）{if（$ e.relatedTarget）.find（“＃map “;}}。length == 1）{ \t google.maps.event.trigger（map，”resize“）; } }）; – Alex 2015-02-23 13:45:54

将'slide.bs.carousel'更改为'sliding.bs.carousel' – anpsmn 2015-02-23 13:47:25

我已经在 – Alex 2015-02-23 13:52:41

Google地图作为Bootstrap旋转木马上的背景并未完全显示

回答

相关问题