Question

我正试图在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和位置，但是它不起作用。有任何线索吗？

感谢您的帮助

Answer 1

看看是否有帮助

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

Answer 2

我使用以下代码通过使离子头透明并使用全屏离子含量在Google地图上放置搜索栏。

在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%; 
  }

离子地图在Google地图上搜索栏

2 个答案: