Ionic 2 Native Map menu chồng chéo bên

Question

Đã tạo Ionic 2 Bản đồ gốc theo hướng dẫn của Josh Morony:

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

Mọi thứ hoạt động tốt. Đây là vấn đề:

Chế độ xem của tôi có menu bên, khi tôi nhấp vào menu bên, nút gạt sẽ xuất hiện, nhưng các tùy chọn bên trong không thể nhấp được. Khi tôi nhấp đúp vào tùy chọn trình đơn trong trình mô phỏng, bản đồ được phóng to. Bản đồ đã chồng lên menu bên của tôi, có giải pháp nào cho trường hợp khẩn cấp này không?

Cảm ơn bạn.

Answer 1

Tôi không thể cung cấp giải pháp cho bạn, nhưng Josh đã viết một số vấn đề bạn có thể mong đợi bằng cách sử dụng plugin bản đồ Cordova, bao gồm cả kịch bản chính xác mà chúng tôi đang chạy vào:

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

Tóm lại, vì chúng tôi đang sử dụng Ionic 2, tốt nhất bạn nên sử dụng SDK javascript thay vì plugin gốc. Tôi nghi ngờ rằng sẽ chơi đẹp hơn với Ionic nói chung.

Answer 2

hành vi được mong đợi theo tài liệu plugin, những gì bạn cần làm là khi thanh bên được mở - map.setClickable (false), sau đó khi nó đóng lại, có thể nhấp trở lại thành true.

Ví dụ, chúng ta hãy giả sử rằng menu là thành phần chính, vì vậy u làm một cái gì đó như thế này trong các mẫu (app.html):

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

trong app.ts hay tuy nhiên nó được gọi là cho bạn

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

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

sau đó vào phần bản đồ u kèm theo một người biết lắng nghe khi bản đồ sẵn sàng:

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

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

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

và có lẽ unsubscribe khi trang được đóng:

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

đừng quên

import { Events } from 'ionic-angular'; 

và tiêm các sự kiện trong mỗi constuctor phần

constructor(
    private events: Events 
) { 

hy vọng rằng sẽ giúp.

Answer 3

<ion-menu type="push" [content]="content"> làm việc tốt cho tôi

Answer 4

Trong Ionic Framework 2 bạn có thể buộc các menu type để nhanh chóng khắc phục vấn đề này.

<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> 

hoặc ghi đè lên config biến menuType trong @NgModule

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

tôi vẫn đang tìm cách khắc phục, sẽ cập nhật khi được tìm thấy.