Ionic Sidemenu i Native Google Maps

Pracuję nad aplikacją jońską, w której używam menu bocznego. Podczas nawigacji do szablonu, który jest tylko div dla renderowania Google Maps (natywny przy użyciu cordova-plugin-maps). Boczne menu jest nałożone na mapę. Dziwne jest to, że mogę wchodzić w interakcję z mapą poprzez boczne menu.Ionic Sidemenu i Native Google Maps

Działa dobrze podczas korzystania z Javascript Google Maps.

Oto zrzut ekranu jak to wygląda: na urządzeniu z Androidem pojawi

samo.

Pomoc w rozwiązywaniu jest bardzo cenna !!

EDIT: Zapomniałam wspomnieć, że jestem przejście od normalnej stronie (a nie bocznym menu), stąd z powrotem przycisk powyżej. Mam nadzieję, że czyni to bardziej szczegółowym.

Źródło

2016-03-18 coding4fun

Witam, znalazłeś rozwiązanie? –

Tak. Dodałem odpowiedź poniżej: – coding4fun

Znalazłem wreszcie !!

Podczas przechodzenia do mapy musisz ukryć <ion-side-menu>. Na przykład (co zrobiłem):

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

Przy przejściu od mapy, wewnątrz zwrotnego $ stateChangeSuccess, ustawić ją z powrotem do "visible"

nadzieję, że to pomaga!

Źródło

2016-03-19 09:20:43 coding4fun

Czy możesz utworzyć stronę wiki z przykładowym kodem na stronie wiki wtyczki map? https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki – wf9a5m75

Oczywiście! Znajdź wiki tutaj: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Ionic-Side-Menu-with-the-plugin – coding4fun

Dziękujemy za pomoc! – wf9a5m75

Ponieważ mapa wtyczki cordova-google-maps jest zgodna z pozycją mapDiv.

Struktura jonowa tworzy boczne menu pod mapą div.

Powinieneś utworzyć menu boczne powyżej elementu div mapy.

Sprawdź tutaj. https://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456/49

Źródło

2016-03-19 00:16:51 wf9a5m75

Sprawdziłem wątek na forum, nikt nie wydaje bezpośredniej odpowiedzi. Czy możesz mi pokazać kod, jak to naprawić? – coding4fun

Przepraszam, ale nigdy nie użyłem struktury jonowej. – wf9a5m75

może faktycznie ustawić go tak:

Mapa

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

lub

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

* po kliknięciu na mapie w menu bocznym menu zostanie zamknięte, a strona dostaje wystawiany.

Źródło

2016-03-19 10:53:36

SCSS ionic.app.scss lub www/CSSS/

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

Źródło

2016-05-14 02:40:32

Działa to dla mnie: 1.Miejsce ng-hide do

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

oglądać $ ionicSideMenuDelegate w kontroler menu

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

Źródło

2016-08-23 01:17:56

Osobiście znaleźć eleganckie rozwiązanie (z prawej menu) :

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

Źródło

2016-09-30 22:28:51

trzeba zmieniono typ dla domyślnie w tagu ion-menu

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

Źródło

2017-01-21 20:24:45 CrsCaballero

Moje pytanie nie korzysta z Ionic 2 – coding4fun

Odpowiedz

Powiązane problemy