Ionic2 using Baidu Map API (JS) appears white screen solution

Recently self-taught Ionic2, wrote an embedded Baidu Map JS demo, actually ran up after the common white screen problem.

The initial implementation is this:

First the homepage embedded a Baidu map plugin

<div id= "Bmap" style= "width:100%;height:100%" >

A guided sub-page in menu is also embedded with a Baidu map

<div id= "Bmap" style= "width:100%;height:100%" >

Then ionic serve compile execution, the main page appears normal, and the child page pops up when white screen:

Because the essence of Ionic2 is a single-page app based on Angular2, the initial consideration is that the map layer ID of two pages is caused by a bmap conflict.

So modify the sub-page Baidu map layer ID

<div id= "Smap" style= "width:100%;height:100%" >

Again, there is a common "second load map display not complete" issue.

Online verification, the reason is because Baidu map load when its div hidden or use the animation has not yet fully displayed the relationship, the solution for delay 200 milliseconds load:

SetTimeout (function () {that.initmap ();},200);

Execution, this time the main page and sub-page map can show normal.

Re-transform the demo, sub-page for each element of a list,list corresponding to a separate map data, re-use the Map sub-page display

  Itemtapped (event, item) {        This.navCtrl.push (journeydetailspage, {      item:item    });      }

Click to jump to the map sub-page.

This time the problem is: The main page is displayed normally, the child page is displayed for the first time, then white screen.

The analysis concludes that the map layer ID conflict between child pages is caused by the use of the same child page.

To modify a map sub-page:

<div id= "Smap{{index}}" style= "width:100%; height:100% "></div>

This.index = This.navParams.get (' item ') ["index"];

Index uses the parameters passed from the list to differentiate, so that although the sub-pages are the same, each sub-page will use a different map layer id,smap1, Smap2 ...

Create Baidu Map Code:

This.map = new Bmap.map ("Smap" +this.index.tostring ());

Once again, the problem is solved completely.

Two points can be summed up in this article:

1. Ionic2 is a single page application based on ANGULAR2 (except for special requirements)

2. Ionic2 when you use Navctrl or menu to jump to the next new page, the previous page of the current page is not actually completely released (perhaps optimized for page fallback)

For these two points, when building an app using Ionic2, pay particular attention to the ID conflict of DOM elements between different components.

Above..

Ionic2 using Baidu Map API (JS) appears white screen solution