イオン2、イオンセグメントでGoogleマップを使用

Question

私は少し問題があります。 Googleマップはイオン2セグメントには表示されず、セグメント外に表示されます。私は、次の解決方法を試してみましたが、うまくいきませんでした

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

、次のコードを使用しています：

1. 使用の高さと外側のdivには100％の幅。
2. マップのロード機能でタイムアウトを使用します。

Answer 1

マップを独自のページに分割し、セレクタを使用して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にフックします。

Answer 2

私は同じ問題を抱えていましたが、Googleマップは完全に外側のセグメントを示しています。だから、アプローチは、あなたがこのように、選択変数whithそれを表示する際に、セグメント外にマップを配置して処理することができ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> 

をし、それが動作します）