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

Question

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

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

一切都运作良好。这就是问题所在：

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

谢谢。

Answer 1

根据插件文档预期的行为，你需要做的是打开侧边栏时 - 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
) {

希望有所帮助。

Answer 2

<ion-menu type="push" [content]="content">对我有用

Answer 3

在中，您可以强制Ionic Framework 2快速解决此问题。

<ion-menu [content]="mycontent" type="push">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

或覆盖@ NgModule

中的menu type变量 menuType

@NgModule({
  ...
    imports: [
  IonicModule.forRoot(MyApp, {
    menuType: 'push',
    }, {}
  )],
...
})

我仍在寻找修复程序，会在找到时进行更新。

Answer 4

我无法为您提供解决方案，但Josh对使用Cordova地图插件可以预期的一些问题做了很好的记录，包括我们遇到的确切情况：

https://www.joshmorony.com/google-maps-in-ionic-2-native-or-web/

简而言之，由于我们使用的是Ionic 2，因此最好只使用javascript SDK而不是本机插件。我怀疑一般来说Ionic会发挥得更好。