首页 > 代码库 > Ionic2使用百度地图API(JS)出现白屏解决方案

Ionic2使用百度地图API(JS)出现白屏解决方案

最近自学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冲突问题。

以上。。

Ionic2使用百度地图API(JS)出现白屏解决方案