Question

我设法在ionic 3中使用了传单地图，但是我在定位上遇到了问题。滚动时，我想在所有文本下放置一个正方形地图。

我阅读了有关如何使用传单地图的内容，偶然发现了这个混蛋。

.map-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 50%;
    width: 50%;
    }

这是html组件

<div class="map-container">
  <div #map id="map" style="width: 100%; height: 100%">
  </div>
<div>

这是我使用组件的地方

<ion-content padding>
    <div (swipe)="swipeEvent($event)" *ngIf="event">

          <h1><b>{{event.title | uppercase }}</b></h1>

          <p>{{ event.custom_fields.evcal_srow*1000 | date: ' EEEE MMMM d' }}</p>

          <p><b>{{ event.custom_fields.evcal_srow*1000 | date:  'h:mm a' }} - {{ event.custom_fields.evcal_erow*1000 | date: 'h:mm a' }}</b></p>

          <p>{{event.content | removehtml }}</p>

          <map [data]="event"></map>

          <h1 (click)="AddToCalendar(event)">ADD TO CALENDAR</h1>
    </div>
  </ion-content>

This is what I get

当我将绝对位置更改为其他任何位置时，它都不会显示。

如何使地图仅显示在文字下方？

Answer 1

您添加像这种类型的CSS

.map-container {
float:left;
position: relative;
float:left;

}

离子3单张地图位置

1 个答案: