最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题。。
最初的实现是这样的:
首先主页内嵌了一个百度地图插件
<div id="Bmap" style="width: 100%;height: 100%">
之后menu中一个引导的子页面也内嵌了一个百度地图
<div id="Bmap" style="width: 100%;height: 100%">
然后ionic serve编译执行,主页面显示正常,而子页面弹出时白屏。。
因为ionic2的本质是一个基于angular2的单页App,因此初步考虑是由于两个页面的地图层id都是Bmap冲突所致。
因此修改子页面百度地图层id
<div id="Smap" style="width: 100%;height: 100%">
再次执行,出现了常见的“第二次加载地图显示不全”的问题。
上网查证,原因是由于百度地图加载时其所在div隐藏或者使用了动画尚未完全显示的关系,解决方案为延迟200毫秒加载:
setTimeout(function(){that.initMap();},200);
执行,这次主页面和子页面的地图都能显示正常了。。
再次改造demo,子页面为一个list,list中每个元素对应一段独立的地图数据,复用地图子页面显示
itemTapped(event, item) { this.navCtrl.push(JourneyDetailsPage, { item: item }); }
点击跳转到地图子页面。
这次出现的问题为:主页面正常显示,子页面第一次正常显示,之后白屏。。
分析之后得出结论:因为使用同一个子页面,导致子页面间的地图层id冲突。
修改地图子页面:
<div id="Smap{{index}}" style="width: 100%; height: 100%"></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冲突问题。
以上。。
时间: 2024-10-08 00:29:09