이온 2, 이온 세그먼트에서 google maps 사용

약간의 문제가 있습니다. Google지도는 이온 2 세그먼트에 표시되지 않고 세그먼트 외부에 표시됩니다. 나는 다음과 같은 솔루션을 시도했지만 작동하지 않았다이온 2, 이온 세그먼트에서 google maps 사용

<div [ngSwitch]="report_details"> 
    <div *ngSwitchCase="'details'"> 
     <div #map id="map"></div> 
    </div> 
</div>

, 다음 코드를 사용하고 있습니다 :

사용의 높이와 외부 사업부에 100 %의 폭입니다.
지도로드 기능에서 시간 초과를 사용합니다.

출처

2017-04-04 Saad

콘솔에보고 된 문제가 ? –

문제를 명확히하기 위해 정보와 코드를 추가해야합니다. 세그먼트 코드는 어디에 있습니까? – JoeriShoeby

@SagarKulkarni 콘솔에 아무 것도보고되지 않습니다. – Saad

맵을 자체 페이지로 분해하고 선택기를 사용하여 ngSwitch 지정 문을 통해로드 할 수 있습니다. 그런 식으로 ionViewDidEnter() 및 ionViewWillEnter()와 같은 이온 후크로 작업 할 수 있습니다.

콘솔에 있습니다.

ionic generate page map

그런 다음 HTML에서 이와 비슷한 방법을 사용해보십시오.

<div [ngSwitch]="report_details"> 
    <div *ngSwitchCase="'details'"> 
     <page-map #map id="map"></page-map> 
    </div> 
</div>

map.ts

ionicViewDidEnter(){ 
    // initiate map here 
}

다음 당신이 map.ts/map.html에서 원하는 훨씬 더 유연성을하기 위해 자신의 navCtrl에 끼어 것 무엇이든 할 수 있습니다.

출처

2017-04-04 23:00:32

나는 시도했지만 그 작동하지 않습니다. 같은 결과가 아무것도 표시되지 않습니다. – Saad

잘 했어, 어떻게 TS에서지도를 초기화하나요? –

함수를 사용하고 ionViewDidLoad() 함수에서 초기화하고 있습니다. 나는 또한 그것을 생성자에서 초기화하려고 시도했다. – Saad

내가 지적한 것과 동일한 문제가 있었지만 Google지도는 완벽하게 세그먼트 밖에 표시하고 있습니다. 그래서 접근 방식은 세그먼트 외부의지도를 배치하고이 같은 선택 변수 아 파크를 표시 할 때 처리 할 수 by biranchi125 in Ionic forum 제안 다음

<div [ngSwitch]="report_details"> 
    <div *ngSwitchCase="'details'"> 
    <!-- you can place other elements here if you want --> 
    </div> 
    <div [style.display]="report_details == 'details' ? 'block' : 'none'"> 
    <div #map id="map"></div> 
    </div> 
</div>

을하고 그것을 작동합니다 :)

출처

2017-12-05 17:52:07 guillermogfer

이온 2, 이온 세그먼트에서 google maps 사용

답변

관련 문제