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

【问题标题】：Search bar over google maps with ionic带有离子的谷歌地图上的搜索栏
【发布时间】：2019-05-02 04:32:15
【问题描述】：

我正在尝试在 ionic 4 中的 google 地图上放置一个搜索栏，就像您在 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 和位置，但它不起作用。这有什么线索吗？

感谢您的帮助

【问题讨论】：

标签： google-maps ionic-framework searchbar

【解决方案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%; 
  }

【讨论】：

【解决方案2】：

看看有没有帮助

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

【讨论】：

感谢 Gary 的回答，但这不起作用，搜索栏没有出现。