小编kai*_*ash的帖子

Ionic 2细分不适用于Google地图

我试图在离子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>
Run Code Online (Sandbox Code Playgroud)

这是我的.scss文件:

 #map {
    width: 100%;
    height: 100%;
  }
Run Code Online (Sandbox Code Playgroud)

当我加载应用程序时,列表段工作正常,但地图显示为白色屏幕.如果我在ion-content标签之后定义了map div标签,那么地图将在两个段中显示.如何在1段中创建地图,在其他段中列出?

google-maps ionic-framework ionic2 angular

5
推荐指数
1
解决办法
927
查看次数

标签 统计

angular ×1

google-maps ×1

ionic-framework ×1

ionic2 ×1