Angular 离子2，在离子段中使用谷歌地图

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

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

我尝试了以下解决方案，但没有成功：

在外分区上使用100%的高度和宽度

使用映射加载超时功能

---

您可以尝试将地图拆分为自己的页面，并使用选择器通过ngSwitch指令将其加载。这样，您就可以使用ionic钩子，如IonViewDiCenter（）和ionViewWillEnter（）

在控制台中

ionic generate page map

然后在您的HTML中尝试使用如下内容

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

---

然后，你可以在map.ts/map.html中做任何你想做的事情，它将连接到自己的navCtrl上，以获得更大的灵活性。

我遇到了与你指出的相同的问题，Google Maps完全显示了外部片段。因此，按照建议的方法，您可以将地图放置在线段之外，并处理何时使用选择变量显示地图，如下所示：

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

---

它可以工作：）

控制台上是否报告了任何问题？您应该添加更多信息和代码以明确您的问题。例如，您的段代码在哪里？@SagarKulkarni控制台上未报告任何内容。@JoeriShoeby我的段在标题中初始化。类似这样的

详细介绍员工

，上面的div是内容。请更新您的问题，并提供您已有的完整html和ts。我已经尝试过，但不起作用。结果是一样的，没有显示任何内容。嗯，当，你如何在ts中初始化映射？我正在使用一个函数，并在ionViewDidLoad（）函数中初始化它。我也试过在Constructor中初始化它

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