Question

我正在制作一个有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>

地图-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;
  }
}

Answer 1

如何将它包装在setTimeout中？

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

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

1 个答案: