Ionic 2 Segments 不适用于谷歌地图答案

【问题标题】：Ionic 2 Segments not working with Google MapsIonic 2 Segments 不适用于谷歌地图
【发布时间】：2017-01-02 10:00:46
【问题描述】：

我试图在 ionic 2 中将 Google 地图实现为分段（地图和列表）。

这是我的 HTML：

<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 文件：

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

当我加载应用程序时，列表部分工作正常，但地图显示为白屏。如果我在 ion-content 标签之后定义 maps div 标签，那么地图会显示在两个段中。我怎样才能在 1 段中拥有地图并在其他段中拥有列表？

【问题讨论】：

您使用过joshmorony.com/… 吗？我正在尝试分段实施谷歌地图，但它不起作用。答案有用吗？
我已经用这种方法解决了这种情况：stackoverflow.com/a/47659735/4720864

标签： google-maps angular ionic-framework ionic2

【解决方案1】：

包含地图的 div 的高度是 0 px，所以地图是不可见的。把你的代码改成这样：

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

然后在您的 CSS/SASS/LESS 中将 .map-wrapper 类设置为 100% 的高度。

【讨论】：