最近自学ionic2，写了一个内嵌百度地图JS的demo，实际跑起来之后出现了大家常见的白屏问题。。
最初的实现是这样的：
首先主页内嵌了一个百度地图插件
<div>
之后menu中一个引导的子页面也内嵌了一个百度地图
<div>
然后ionic serve编译执行，，主页面显示正常，而子页面弹出时白屏。。
因为ionic2的本质是一个基于angular2的单页App，因此初步考虑是由于两个页面的地图层id都是Bmap冲突所致。
因此修改子页面百度地图层id
<div>
再次执行，出现了常见的“第二次加载地图显示不全”的问题。
上网查证，原因是由于百度地图加载时其所在div隐藏或者使用了动画尚未完全显示的关系，解决方案为延迟200毫秒加载：
setTimeout(function(){that.initMap();},200);
执行，这次主页面和子页面的地图都能显示正常了。。
再次改造demo，子页面为一个list，list中每个元素对应一段独立的地图数据，复用地图子页面显示
itemTapped(event, item) { this.navCtrl.push(JourneyDetailsPage, { item: item }); }
点击跳转到地图子页面。
这次出现的问题为：主页面正常显示，子页面第一次正常显示，之后白屏。。
分析之后得出结论：因为使用同一个子页面，导致子页面间的地图层id冲突。
修改地图子页面：
<div></div>
this.index = this.navParams.get(‘item‘)["index"];
index使用从列表传过来的参数做区分，这样以来虽然子页面相同，但每个子页面都将使用不同的地图层id，Smap1、Smap2.。。
创建百度地图代码：
this.map = new BMap.Map("Smap"+this.index.toString());
再次执行，问题彻底解决。
由此可总结出两点内容：
1. Ionic2是基于Angular2的单页应用（特殊需求的除外）
2. Ionic2使用navCtrl或者menu跳转到后一个新页面时，当前页面的上一个页面其实并未完全释放（可能是为页面回退做的优化处理）
出于这两点，使用Ionic2构建应用时，需特别注意不同组件间dom元素的id冲突问题。
以上。。
Ionic2使用百度地图API(JS)出现白屏解决方案