angular - Ionic 2，在 ionic 段中使用谷歌地图

Question

我有一个小问题。谷歌地图不显示在 ionic 2 段中，而是显示在段外。我正在使用以下代码，

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

我尝试了以下解决方案但没有奏效:

1. 在外部 div 上使用 100% 的高度和宽度。
2. 在 map 加载功能上使用超时。

Answer 1

您可以尝试将 map 分解成它自己的页面，然后使用选择器通过 ngSwitch 指令加载它。这样你就可以使用 ionViewDidEnter() 和 ionViewWillEnter() 等 ionic 钩子(Hook);

在控制台中。

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 中做任何你想做的事，它会 Hook 到它自己的 navCtrl 上，以获得更大的灵 active 。