Ionic 3 传单地图位置答案

【问题标题】：Ionic 3 leaflet map positionIonic 3 传单地图位置
【发布时间】：2018-09-26 23:26:32
【问题描述】：

我已经设法在 ionic 3 中使用传单地图，但我的定位有问题。滚动时我想要所有文本下的方形地图。

我读了一些关于如何使用传单地图的东西，我遇到了这个 sass。

.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

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

如何让地图只出现在文字下方？

【问题讨论】：

你能创建一个 stackblitz 演示来重现它吗？
如果是 css 控制你的位置，我会使用 chrome 上的开发工具进行离子服务并确定需要操作的确切类。这有助于我处理需要更改样式的某些组件。当然要记住，md是和android相关的，ios当然是和ios相关的。

标签： ionic-framework sass leaflet

【解决方案1】：

你添加 Like 这种类型的 CSS

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

}

【讨论】：