Segmenty jonowe 2 nie współpracują z Google Maps.

Question

Próbuję wprowadzić Mapy Google w jonicznym 2 jako Segmenty (mapa i lista).

Tu jest mój HTML:

<ion-header> 
    <ion-navbar> 
    <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 

    <ion-segment [(ngModel)]="clients"> 
     <ion-segment-button value="map"> 
     Map 
     </ion-segment-button> 
     <ion-segment-button value="list"> 
     List 
     </ion-segment-button> 
    </ion-segment> 
     </ion-navbar> 
</ion-header> 
<ion-content> 
    <div [ngSwitch]="clients"> 
    <div *ngSwitchCase="'map'"> 
     <div #map id="map"></div> 
    </div> 

    <ion-list *ngSwitchCase="'list'"> 
     <ion-item> 
     <h2>List Item 1</h2> 
     </ion-item> 


</ion-list> 
    </div> 
</ion-content> 

Oto mój plik .scss:

#map { 
    width: 100%; 
    height: 100%; 
    } 

Kiedy załadować aplikację segment Lista działa dobrze, ale mapy pojawiają się jako biały ekran. Jeśli zdefiniuję etykiety div zaraz po znaczniku zawartości jonów, wówczas mapy będą wyświetlane w obu segmentach. Jak mogę mieć Mapy w 1 segmencie i Listy w innym segmencie?

Answer 1

Element div zawierający mapę ma wysokość 0 pikseli, więc mapa nie jest widoczna. Zmień swój kod coś takiego:

<div class="map-wrapper" [ngSwitch]="clients"> 
    <div *ngSwitchCase="'map'" #map id="map"></div> 
</div> 

a następnie ustawić klasę .map-wrapper do wysokości 100% w CSS/SASS/LESS.