OpenLayers 4 - 即使地图已加载，Ionic 2 在更改页面后也不显示地图答案

【问题标题】：OpenLayers 4 - Ionic 2 not displaying the map after changing page even if the map is loadedOpenLayers 4 - 即使地图已加载，Ionic 2 在更改页面后也不显示地图
【发布时间】：2017-02-28 13:13:54
【问题描述】：

我正在制作一个有 2 页的应用程序，每个页面上都有一张地图。问题是在启动应用程序时，会显示一张地图。但是在那之后我转到第二页，即使创建了对象映射，也什么都没有。如果我回到第一页，即使第一次也没有任何效果。（出现的页面左上角只有一个深灰色的小矩形）。

地图的创建在2页上是一样的。

感谢您的帮助！

page1.ts

import { Component , ViewChild, Renderer, ElementRef} from '@angular/core';
import { Platform } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { MapProvider } from '../../providers/map-provider';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {
  @ViewChild('map') map: ElementRef;

  constructor(public navCtrl: NavController,platform: Platform, public renderer: Renderer, public mapService: MapProvider) { }

  ionViewDidLoad(){
      this.map = this.mapService.loadMap(this.map);
      console.log(this.map);
  }
}

第2页也一样

page1.html

<ion-content>
    <div id="map" #map class="map" cache-view="false">
      <button class="geolocateButton" color="danger" ion-button icon-only (click)="geolocate()">
          <ion-icon name="locate"></ion-icon>
      </button>
    </div>
</ion-content>

Map-provider.ts

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as ol from 'openlayers';

@Injectable()
export class MapProvider {

  constructor() {}

  loadMap(map){
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
    return map;
  }
}

【问题讨论】：

标签： angular typescript ionic2 openlayers openlayers-3

【解决方案1】：

将它包装在 setTimeout 中怎么样？

setTimeout(() => {
         this.loadMap(map);
       }, 500);

【讨论】：