带有离子的谷歌地图上的搜索栏

Question

我正在尝试在 ionic 4 中的谷歌地图上放置一个搜索栏，就像您在 GoogleMaps 应用程序中看到的那样，但我无法显示它。

这是我的代码：

  <ion-content #map id='map' >
      <ion-searchbar #searchBar></ion-searchbar>
  </ion-content>

#map {
width: 100%;
height: 100%;
z-index: 1;
position: absolute;}

#searchBar {
display: block;
z-index: 999;
position: absolute;}

我一直在玩 z-index 和位置，但它不起作用。 这有什么线索吗？

我感谢您的帮助

Answer 1

我使用以下代码通过使离子标题透明并使用全屏离子内容在谷歌地图上放置搜索栏。

在 home.page.html

<ion-header  no-border  color="translucent">
</ion-header>
<ion-content fullscreen>
  <ion-toolbar slot="fixed" color="translucent" > 
    <ion-searchbar   color="light"  placeholder="Filter Schedules"></ion-searchbar>   
  </ion-toolbar>
  <div #map id="map">
  </div>
</ion-content>

还有我的 home.page.scss

 .header::after {
    background-image: none;
  }
  ion-toolbar {
    --background-color: transparent;
    --ion-color-base: transparent !important;
  }

#map {  
  position: absolute; 
  height: 100%;
  width: 100%; 
  } 

Answer 2

看看是否有帮助

 <ion-content>
  <div #map id='map'></div>
  <ion-searchbar #searchBar></ion-searchbar>
 </ion-content>