Ionic Sidemenu和原生谷歌地图

我正在开发一个离子应用程序，我在使用侧面菜单。导航到仅用于渲染Google地图的模板（使用cordova-plugin-maps的本地模板）时。侧面菜单覆盖在地图上。奇怪的是我可以通过侧面菜单与地图进行交互。Ionic Sidemenu和原生谷歌地图

它使用Javascript Google Maps时效果很好。

下面是它的外观截图：出现在Android设备上

同样的事情。

在解决的帮助非常感谢！

编辑： 我忘了提到我正在从一个正常的页面（而不是侧面菜单），因此上面的后退按钮转换。我希望这使得它更具体。

来源

2016-03-18 coding4fun

嗨，你发现了一个解决方案？ –

是的。我在 – coding4fun

我发现它终于！

在转换到地图时，您必须隐藏<ion-side-menu>。例如（我做了什么）：

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

当从地图转变之遥，$ stateChangeSuccess回调中，将其设置回"visible"

希望这有助于！

来源

2016-03-19 09:20:43 coding4fun

您能否在地图插件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

由于cordova-google-maps插件的地图遵循mapDiv位置。

离子框架在地图div下创建侧面菜单。

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

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

来源

2016-03-19 00:16:51 wf9a5m75

以下添加了一个答案我检查了论坛主题，似乎没有人直接回答。你能告诉我如何解决这个问题的代码吗？ – coding4fun

对不起，但我从未使用过离子框架 – wf9a5m75

你实际上可以设置这样的：

地图

<ion-item nav-clear menu-close ng-click="fuction to call the map page">

或

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

*当你在菜单中点击地图侧边菜单关闭，页面获取显示。

来源

2016-03-19 10:53:36

SCSS ionic.app.scss或www/CSSS/

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

来源

2016-05-14 02:40:32

这个工作对我来说： 1。地方纳克隐藏到

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

在菜单控制器观看$ ionicSideMenuDelegate

// hack sidemenu overlay $scope.$watch(function() { return $ionicSideMenuDelegate.getOpenRatio(); }, function (newValue, oldValue) { if (newValue == 0) { $scope.hideLeft = true; } else { $scope.hideLeft = false; } });

来源

2016-08-23 01:17:56

就个人而言，我发现了一个很好的解决方案（右菜单）：

.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; 
    } 
}

来源

2016-09-30 22:28:51

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

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

来源

2017-01-21 20:24:45 CrsCaballero

我的问题是没有使用Ionic 2 – coding4fun

Ionic Sidemenu和原生谷歌地图

回答

相关问题