Ionic Sidemenu và Native Maps của Google

Question

Tôi đang phát triển ứng dụng Ionic, nơi tôi đang sử dụng menu bên. Khi điều hướng đến một mẫu chỉ là một div để hiển thị Google Maps (bản địa sử dụng cordova-plugin-maps). Menu bên được phủ lên bản đồ. Điều kỳ lạ là tôi có thể tương tác với bản đồ thông qua menu phụ.

Nó hoạt động tốt khi sử dụng Javascript Google Maps.

Dưới đây là một ảnh chụp màn hình của nó trông như thế:

Điều tương tự cũng xuất hiện trên một thiết bị Android.

Trợ giúp giải quyết được đánh giá cao !!

EDIT: tôi quên đề cập đến mà tôi đang chuyển từ một trang bình thường (không phải là phụ menu), vì thế mà nút quay lại ở trên. Tôi hy vọng điều đó cụ thể hơn.

Answer 1

tôi đã tìm thấy nó CUỐI CÙNG !!

Bạn phải ẩn <ion-side-menu> khi chuyển sang bản đồ. Ví dụ (những gì tôi đã làm):

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

Khi chuyển ra khỏi bản đồ, bên trong callback $ stateChangeSuccess, đặt nó trở lại "visible"

Hope this helps!

Answer 2

Do bản đồ của plugin cordova-google-maps theo vị trí mapDiv.

Khung ionic tạo trình đơn bên trong div bản đồ.

Bạn nên tạo menu bên phía trên bản đồ div.

Khám phá tại đây. https://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456/49

Answer 3

bạn thực sự có thể thiết lập nó như thế này:

Bản đồ

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

hoặc

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

* khi bạn click trên bản đồ trong menu menu bên đóng và trang bị hiển thị.

Answer 4

SCSS ionic.app.scss hoặc www/csss/

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

Answer 5

này làm việc cho tôi: 1.Nơi ng-hide để

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

2. xem $ ionicSideMenuDelegate trong điều khiển trình đơn

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

Answer 6

Cá nhân, tôi tìm thấy một giải pháp thanh lịch (menu bên phải) :

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

Answer 7

Bạn cần loại thay đổi mặc định trên thẻ ion-menu

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