이온이 기본지도 중첩 사이드 메뉴

Question

:

http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/.

모든 것이 잘 작동합니다. 여기에 문제가있다 :

내보기에는 사이드 메뉴가 있는데, 사이드 메뉴를 클릭하면 토글이 나타나지만 옵션은 취소 할 수 없다. 에뮬레이터에서 메뉴 옵션을 두 번 클릭하면지도가 확대되었습니다.지도에 내 사이드 ​​메뉴가 겹쳐져 있는데이 비상 사태에 대한 해결책이 있습니까?

감사합니다.

Answer 1

내가 해결책을 제시 할 수는 없지만 Josh는 정확한 시나리오를 포함하여 Cordova지도 플러그인을 사용하여 기대할 수있는 몇 가지 문제에 대해 훌륭한 글을 남겼습니다.

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

요약하면 Ionic 2를 사용하기 때문에 기본 플러그인 대신 javascript SDK를 사용하는 것이 가장 좋습니다. 나는 그것이 일반적으로 이오닉 (ionic)으로 훨씬 더 좋을 것이라고 생각한다.

Answer 2

플러그인 설명서에 따라 동작이 예상됩니다. 사이드 바를 열면 사이드 바를 열 때 필요한 동작이 map.setClickable (false) 인 다음 닫을 때 클릭 가능을 true로 되돌립니다. 예를 들어

,의 메뉴는 주요 구성 요소에 있다고 가정하자, 그래서 u는 템플릿 (app.html)에서이 같은 작업을 수행합니다 app.ts에서

<ion-menu #sidebar [content]="content" (ionOpen)="onMenuOpen($event)" (ionClose)="onMenuClose($event)"> 

또는 그러나 그것은 호출됩니다

  map.one(GoogleMapsEvent.MAP_READY).then(() => { 

      this.events.subscribe('sidebar:open',() => { 
       map.setClickable(false); 
      }); 

      this.events.subscribe('sidebar:close',() => { 
       map.setClickable(true) 
      }); 

: 맵이 준비가되면 당신은

onMenuOpen(event) { 
    this.events.publish('sidebar:open'); 
} 

onMenuClose(event) { 
    this.events.publish('sidebar:close'); 
} 

다음지도 구성 요소에 u는 리스너를 부착 페이지가 닫힐 때 아마 취소 :

ionViewWillLeave() { 
    this.events.unsubscribe('sidebar:open'); 
    this.events.unsubscribe('sibebar:close'); 
} 

이

import { Events } from 'ionic-angular'; 

잊지 및 각 구성 요소 constructor에에 도움이

constructor(
    private events: Events 
) { 

희망을 이벤트를 주입하지 않습니다.

Answer 3

<ion-menu type="push" [content]="content">는 신속하게이 문제를 극복하기 위해 menu type을 강제 할 수 Ionic Framework 2에서 나를

Answer 4

좋은 작동합니다. 발견했을 때 나는 아직도 수정을 찾고 있어요

@NgModule({ 
    ... 
    imports: [ 
    IonicModule.forRoot(MyApp, { 
    menuType: 'push', 
    }, {} 
)], 
... 
}) 

당신의 @에

<ion-menu [content]="mycontent" type="push"> 
    <ion-content> 
    <ion-list> 
     <p>some menu content, could be list items</p> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

또는 config 변수 menuType을 덮어 NgModule는 업데이트됩니다.