ionic2 – Ionic 2原生地图重叠侧边菜单

按照Josh Morony教程创建的Ionic 2 Native地图：

http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

一切都很好.这是问题所在：

我的视图有一个侧面菜单,当我点击侧面菜单时,它会出现切换,但里面的选项是不可点击的.当我双击模拟器中的菜单选项时,地图会放大.地图重叠了我的侧边菜单,这个紧急情况有什么解决方案吗？

谢谢.

根据插件文档的预期行为,你需要做的是打开侧边栏时 – map.setClickable(false),然后当它关闭时将clickable变为true.

例如,让我们假设菜单在主要组件上,所以你在模板(app.html)中做这样的事情：

<ion-menu #sidebar [content]="content" (ionOpen)="onMenuOpen($event)" (ionClose)="onMenuClose($event)">

在app.ts或者它是为你而调用的

onMenuOpen(event) {
    this.events.publish('sidebar:open');
}

onMenuClose(event) {
    this.events.publish('sidebar:close');
}

然后在地图组件上,当地图准备好时,你附加了一个监听器：

map.one(GoogleMapsEvent.MAP_READY).then(() => {

            this.events.subscribe('sidebar:open', () => {
                map.setClickable(false);
            });

            this.events.subscribe('sidebar:close', () => {
                map.setClickable(true)
            });

并且可能在页面关闭时取消订阅：

ionViewWillLeave() {
    this.events.unsubscribe('sidebar:open');
    this.events.unsubscribe('sibebar:close');
}

不要忘记

import { Events } from 'ionic-angular';

并在每个组件构造器中注入事件

constructor(
    private events: Events
) {

希望有所帮助.