google-maps - Ionic 2 Segments 不适用于谷歌地图

Question

我正在尝试将 ionic 2 中的 Google map 实现为段( map 和列表)。

这是我的 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%;
  }

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

Answer 1

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

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

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