百度地图显示问题的解决方案（续上篇博客）

上篇blog提到了关于百度地图显示的一个问题，问题产生的环境也阐述了。其实在昨天测试了很多次已经解决了这个问题，今天就详细说明一下问题的解决方案吧。
首先，讨论一下bootstrap的模态框弹出和关闭的事件触发函数：
1、show.bs.modal:show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget 属性进行访问。

$('#myModal').on('show.bs.modal', function (event) {
  // do something...
})

2、shown.bs.modal:此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。

$('#myModal').on('shown.bs.modal', function (event) {
  // do something...
})

类比可知: a)hide.bs.modal: hide 方法调用之后立即触发该事件； b)hiden.bs.modal: 此事件在模态框被隐藏（并且同时在 CSS过渡效果完成）之后被触发。
好了，大家可能想，讲解百度地图的显示问题怎么会讲到模态框的事件触发函数上去呢？其实，百度地图是加载到一个div中，而div存在于模态框里，就要求div先加载好了，再定位到这个div，将百度地图加载到其中。如果，在show.bs.modal中加载地图，就会出现一个问题:模态框中的div是否已经生成，CSS过渡效果是否已经完成？很显然，没有。所以必须要shown.bs.modal`中完成百度地图的加载，才不至于出现显示不正常的问题。
最后，祝大家5.1劳动节快乐哦！