在Ionic移动应用程序中，制作离子卡/离子幻灯片位于Google Map的顶部-Java 学习之路

我正在创建一个使用Ionic的混合移动应用程序，而且我正在尝试使用可刷卡的卡片放在 Map 上，类似于TripAdvisor应用程序 . 我是所有这一切的新手，所以真的很难与这个 .

我正在使用Angular Google Maps在 <agm-map> 元素中创建 Map . 和Ionic 's ion-slides element with ion-card in each ion-slide to create the sliding cards. I want the map to fill the entire content area. So far I have the map and the slides sitting below it, but I can' t弄清楚如何让他们坐在上面 . 我试过玩这里建议的定位：How to float a div over Google Maps?但这似乎弄乱了卡片的宽度和高度，或者使 Map 完全消失 .

我尝试在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;
    }
}

1 回答

0
这就是我最终做到的;使 Map 100％高度并为离子幻灯片添加了减去上边距：
```
agm-map {
        height: 100%;
    }
    ion-slides {
        height: 175px;
        margin-top: -175px;
    }
```
回复于 2024-05-18T16:42:17+08:00

在Ionic移动应用程序中，制作离子卡/离子幻灯片位于Google Map的顶部

1 回答

相关问题