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

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

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

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