在底部添加ion-tab-bar时禁用Google地图

Question

在ion-tab-bar中添加ion-content会禁用ion-content并使其与之重叠，并且不允许单击地图。我的Google地图在我的应用程序中显示良好。然后，我在地图底部添加了ion-tab-bar。添加后，地图不可点击。看起来好像地图被ion-tab-bar重叠了。

以下是我的代码-

<ion-content padding>

  <div id="map_canvas">
    <ion-searchbar>
    </ion-searchbar>
    <!-- <button ion-button (click)="onButtonClick($event)">Google Map</button> -->    
    <ion-tabs>
        <!-- Tab bar -->
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="account">
            <ion-icon name="heart"></ion-icon> <!-- for favorite -->
          </ion-tab-button>
          <ion-tab-button tab="listview">
            <ion-icon name="clipboard"></ion-icon> <!-- for current parking -->
          </ion-tab-button>
          <ion-tab-button tab="add-circle">
            <ion-icon name="add-circle"></ion-icon> <!-- for More -->
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
  </div>  
</ion-content>

如果我删除了ion-tabs，它就可以正常工作。但是问题出在标签上。我可以单击选项卡，但不再在地图上单击。我正在使用Ionic4

注意-ion-tabs在这里引起问题。如果我将其删除，则标签栏不在底部。