Google maps 使用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指数和位置，但它不起作用。有线索吗

我感谢你的帮助

看看这是否有帮助

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

---

我使用下面的代码在google地图上放置一个搜索栏，使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>

---

谢谢你的回答，加里，但这不起作用，搜索栏不会出现。

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

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