Question

我正在尝试在当前不可见的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>

我希望第三张幻灯片包含一个初始化的地图，但它不是/只是灰色的

在屏幕外标签中初始化传单图（当前不可见的离子载玻片）

0 个答案: