Инициализация карты листовки в закадровом теге (в настоящее время не виден ion-slide) - PullRequest
Новая
       28

Инициализация карты листовки в закадровом теге (в настоящее время не виден ion-slide)

0 голосов
/ 07 февраля 2019

Я пытаюсь инициализировать карту листовки на невидимом в данный момент ion-slide.При перемещении к этому слайду карта-контейнер имеет высоту 0, а карта не отображается.При установке размеров контейнера-карты на фиксированный размер карта видна, но плитки не видны, карта просто серая.

Я попытался вызвать invalidate() и снова удалить / создать карту, но безрезультатно.

моя домашняя страница 

import {
  Component
} from '@angular/core';
import * as leaflet from "leaflet";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map;

  constructor(){
  }

  onChange(event){
    if(this.map && event.realIndex == 2){
      this.map.invalidateSize()
    }
  }

  ionViewDidLoad(){
    this.map = leaflet.map("MAP").fitWorld();
    leaflet.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
  }

}

шаблон 

<ion-content padding>
  <ion-slides (ionSlideDidChange)="onChange($event)">
    <ion-slide>
      a
    </ion-slide>
    <ion-slide>
      b
    </ion-slide>
    <ion-slide>
      <div id="MAP" style="width: 500px; height: 500px"></div>
    </ion-slide>
  </ion-slides>
</ion-content>

Я ожидаю, что третий слайд будет содержать инициализированную карту, но он не /просто серый

...