Ionic 3 - 无法点击谷歌地图上方显示的警报对话框

Dij*_*U.K 4 google-maps typescript ionic2 ionic3 angular

我正在使用AlertControllerionic 3实现一个警报对话框,如下所示

let alert = this.alertCtrl.create({
 title: 'Low battery',
 subTitle: '10% of battery remaining',
 buttons: ['Dismiss']
});
alert.present();
Run Code Online (Sandbox Code Playgroud)

这个警报对话框在谷歌地图上方可见,但我无法点击这个警报按钮,任何点击警报对话框的点击仍然被视为我点击它下面的谷歌地图。即使在地图上方显示警报对话框,我仍然可以像往常一样与地图交互,我可以单击地图中的任何标记,我可以放大、缩小。显示在地图视图上方的警报对话框

seb*_*ras 5

您需要在显示警报时将地图设置为不可点击,然后在关闭时将其设置回可点击:

public showAlert(): void {

    // Disable the map
    this.map.setClickable(false);

    let alert = this.alertCtrl.create({
        title: 'Low battery',
        subTitle: '10% of battery remaining',
        buttons: [
            {
                text: 'Dismiss',
                role: 'cancel',
                handler: () => {

                    // Enable the map again
                    this.map.setClickable(true); 

                }
            }
        ]
    });

    // Show the alert
    alert.present();

}
Run Code Online (Sandbox Code Playgroud)