이오닉 2 세그먼트가 Google지도와 작동하지 않습니다.

이온스 2에 Google지도를 세그먼트 (지도 및 목록)로 구현하려고합니다. 내가 응용 프로그램을로드 할 때이오닉 2 세그먼트가 Google지도와 작동하지 않습니다.

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

, 목록 세그먼트가 잘 작동하지만지도가 흰색 화면으로 표시 :

<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>

가 여기 내 .scss 파일입니다

여기 내 HTML입니다. 이온 내용 태그 직후에 div 태그를 정의하면지도가 두 세그먼트에 모두 표시됩니다. 1 세그먼트에지도가 있고 다른 세그먼트에 목록이 있습니까?

출처

2016-08-25 kailash

을 사용하셨습니까? http://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/? 세그먼트에 Google지도를 구현하려고하지만 작동하지 않습니다. 답변이 작동 했습니까? – Xerri

이 방법으로 이미이 상황을 해결했습니다 : https://stackoverflow.com/a/47659735/4720864 – guillermogfer

지도가 포함 된 div의 높이가 0px이므로지도가 표시되지 않습니다.

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

을 다음 CSS/SASS/LESS 100 %의 높이에 .MAP-래퍼 클래스를 설정 : 그런 식으로 코드를 변경합니다.

출처

2016-11-12 20:34:47 Ikno0wit

이오닉 2 세그먼트가 Google지도와 작동하지 않습니다.

답변

관련 문제