Ionic 2细分不适用于Google地图

Question

我试图在离子2中实现谷歌地图作为细分(地图和列表).

这是我的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标签之后定义了map div标签,那么地图将在两个段中显示.如何在1段中创建地图,在其他段中列出？

Answer 1

包含地图的 div 的高度为 0 px，因此地图不可见。将您的代码更改为类似的内容：

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

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