Question

我正在使用Ionic创建一个混合移动应用程序，对于一页，我试图将可滑动的卡放在地图顶部，类似于TripAdvisor应用程序。我对这一切都是陌生的，因此真的很难与之抗争。

我正在使用Angular Google Maps在<agm-map>元素中创建地图。而Ionic的离子滑片元素在每个离子滑片中都带有离子卡，以创建滑片。我希望地图填满整个内容区域。到目前为止，我已经将地图和幻灯片放置在其下方，但是我不知道如何让他们坐在其顶部。我已经尝试过按照建议的位置进行游戏：How to float a div over Google Maps?，但这似乎弄乱了卡片的宽度和高度，或者使地图完全消失了。

我尝试在stackblitz上重新创建，但无法加载地图，但是无论如何都会共享，因此您可以看到代码（您需要在app.module.ts中添加自己的Google Maps API密钥） https://stackblitz.com/edit/ionic-qgapmk

任何帮助将不胜感激，就像我说的那样对我来说这都是很新的，很高兴学习！

home.html代码：

<ion-header>
  <ion-navbar>
    <ion-title>
      Slides Overlay
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <agm-map [latitude]="51.507692" [longitude]="-0.127718">
    </agm-map>
      <ion-slides loop centeredSlides slidesPerView="auto">
        <ion-slide *ngFor="let slide of scenes; let i = index">
          <ion-card>
            <img [src]="cat" class="slide-image">
            <ion-card-content>
              <h2>
                Heading {{i}}
              </h2>
              <h3>Sub-heading {{i}}</h3>
            </ion-card-content>
          </ion-card>
        </ion-slide>
      </ion-slides>
</ion-content>

home.scss代码：

page-home {

 agm-map {
        height: 100%;
        }

        .swiper-slide{
        width: 70% !important;
    }

    .slide-image {
        height: 100px;
        width: 100%;
        object-fit: cover;
    }

        ion-card {
        height: 160px;
    }

    ion-card-content, .card-content-md{
        text-align: left;
        padding: 0 0 0 3px;
    }
}

Answer 1

这就是我最后的做法；将地图制成100％的高度，并在离子幻灯片上添加了一个负的上边距：

    agm-map {
        height: 100%;
    }
    ion-slides {
        height: 175px;
        margin-top: -175px;
    }

在Ionic移动应用程序中将离子卡/离子滑片放置在Google Map的顶部

1 个答案: