我试图在离子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段中创建地图,在其他段中列出?