Ionic 2 Native Map 重叠侧边菜单答案

【问题标题】：Ionic 2 Native Map overlapping side menuIonic 2 Native Map 重叠侧边菜单
【发布时间】：2017-03-14 01:15:56
【问题描述】：

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

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

一切正常。问题来了：

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

谢谢。

【问题讨论】：

你能显示一些代码吗？你在哪里添加了菜单？
菜单是在我创建“离子启动”时添加的，我相信在地图下这就是菜单无法访问的原因。我仍然可以看到菜单，但无法单击。我不知道如何显示代码，但与我上面从 Josh Morony 发布的内容基本相同。
您可以在问题中添加html部分并使用``来包装代码..
教程没有菜单
只是想让你知道......你没疯。当使用带有侧边菜单的原生谷歌地图插件时，我看到了完全相同的行为。

标签： ionic2 cordova-plugins native

【解决方案1】：

根据插件文档，这是预期的行为，您需要做的是在侧边栏打开时 - map.setClickable(false)，然后在它关闭时将可点击返回为 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
) {

希望有帮助。

【讨论】：

顺利。比以前更好

【解决方案2】：

<ion-menu type="push" [content]="content"> 适合我

【讨论】：

但这会带来滞后的体验。虽然它改变了地图

【解决方案3】：

在Ionic Framework 2 中，您可以强制menu type 快速克服这个问题。

<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

中的 config 变量 menuType

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

我仍在寻找修复程序，找到后会更新。

【讨论】：

【解决方案4】：

我无法为您提供解决方案，但 Josh 对使用 Cordova 地图插件可能会遇到的一些问题进行了很好的描述，包括我们都遇到的确切场景：

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

简而言之，由于我们使用的是 Ionic 2，因此最好直接使用 javascript SDK 而不是原生插件。我怀疑这会与 Ionic 一起玩得更好。

【讨论】：