搜索栏上的谷歌地图与离子

Question

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

这是我的代码：

<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索引和位置，但它不起作用。有线索吗？

我感谢你的帮助

Answer 1

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

在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>

还有我的家.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>