离线Google地图和Ionic侧边菜单

Question

我正在开发一个Ionic应用程序，使用了侧边菜单。当导航到仅包含用cordova-plugin-maps渲染Google地图的div模板时，侧边菜单会覆盖在地图上方。奇怪的是，我可以通过侧边菜单与地图进行交互。

使用JavaScript Google Maps时，它可以正常工作。

以下是它的外观截图：

在Android设备上也出现了同样的问题。

非常感谢您的帮助解决！

编辑： 我忘记提到我正在从普通页面（而不是侧边菜单）过渡，因此上面有返回按钮。希望这样更具体明确。

- coding4fun

---

你好，你找到解决方案了吗？ - Jorge Olaf

是的。我已经在下面添加了答案。 - coding4fun

Answer 1

这是我的建议： 1.把ng-hide放在

后面。

<ion-side-menu side="left" data-ng-hide="hideLeft">

2. 在菜单控制器中观察$ionicSideMenuDelegate

// 修正侧边栏遮罩 $scope.$watch(function () { return $ionicSideMenuDelegate.getOpenRatio(); }, function (newValue, oldValue) { if (newValue == 0) { $scope.hideLeft = true; } else { $scope.hideLeft = false; } });

- Peter.Wang

Answer 2

scss ionic.app.scss or www/csss/

body.menu-open .menu.menu-left {
    visibility: visible;
}
.menu.menu-left {
    visibility: hidden;
}

- Thiago Bezerra

Answer 3

个人认为，我找到了一个优雅的解决方案（右侧菜单）:

.menu.menu-right {
    transform: translate3d(100%, 0, 0) !important;
    -webkit-transition: transform 200ms ease;
    transition: transform 200ms ease;
}

.menu-open {
    .menu.menu-right {
        transform: translate3d(0, 0, 0) !important;
    }
}

- Alexandre Bonhomme

Answer 4

你实际上可以这样设置：

地图 <ion-item nav-clear menu-close ng-click="调用地图页面的函数"> 或者

<ion-item nav-clear menu-close ui-sref="url to page">

当您在菜单中点击“地图”时，侧边菜单将关闭并显示页面。

- Nithin C

Answer 5

您需要更改ion-menu标签的默认类型。

<ion-menu type="reveal" [content]="content">
...
...
...
</ion-menu>

- CrsCaballero

---

我的问题并没有使用Ionic 2。 - coding4fun

Answer 6

我终于找到了！！

当切换到地图时，你必须隐藏<ion-side-menu>。例如（我所做的）：

document.getElementById("side-menu").style.visibility = 'hidden';

当从地图切换时，在 $stateChangeSuccess 回调函数内将其设置回 "visible"

希望这可以帮到你！

- coding4fun

---

你能否在maps插件的wiki页面上创建一个带有示例代码的解释性wiki页面？https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki - wf9a5m75

当然！在这里找到维基：https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Ionic-Side-Menu-with-the-plugin - coding4fun

谢谢你的帮助！ - wf9a5m75

Answer 7

因为 cordova-google-maps 插件的地图跟随 mapDiv 的位置。

ionic-framework 在地图 div 下创建侧边菜单。

你应该在地图 div 上方创建侧边菜单。

请查看这里。 https://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456/49

- wf9a5m75

---

我查看了论坛帖子，似乎没有人给出直接的答案。你能否请给我展示如何修复这个问题的代码？ - coding4fun