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

Posted 2020-09-12 从前端开发到全栈

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

以上。。