離子2本機地圖重疊側菜單

創建離子2本機地圖以下約什Morony教程：離子2本機地圖重疊側菜單

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

一切正常。這裏的問題：

我的看法有一個側面菜單，當我點擊側面菜單，它會出現切換，但裏面的選項是不可點擊的。當我雙擊模擬器中的菜單選項時，地圖放大。地圖重疊了我的側邊菜單，有沒有解決這個緊急情況的方法？

謝謝。

來源

2016-12-15 Reo Lim

你能顯示一些代碼嗎？你在哪裏添加菜單？ –

當我創建「離子開始」時添加菜單，我相信在地圖下這就是菜單無法訪問的原因。我仍然可以看到菜單，但無法點擊。我不知道如何顯示代碼，但基本上和我在Josh Morony上面發表的內容一樣。 –

您可以在問題中添加html部分並使用''來包裝代碼.. –

我無法爲您提供解決方案，但Josh對使用Cordova地圖插件時可能會遇到的一些問題做了很好的報道，其中包括我們遇到的確切場景：

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

總之，因爲我們使用的是Ionic 2，所以最好只使用JavaScript SDK而不是本地插件。我懷疑這種情況在一般情況下會比離子更好。

來源

2017-01-18 12:58:46

根據插件文檔預計的行爲，您需要做的是在打開側邊欄時 - map.setClickable（false），然後當它關閉時將clickable變爲true。

例如，讓我們假定菜單的主要成分，所以ü做這樣的事情在模板（app.html）：

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

在app.ts

或但它是呼籲你

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

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

則地圖部件U上附加一個偵聽器時地圖已準備就緒：

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

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

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

當頁面被關閉可能退訂：

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

不要忘記

import { Events } from 'ionic-angular';

並注入事件中的每個組件constuctor

constructor(
    private events: Events 
) {

希望幫助。

來源

2017-01-24 20:17:13 oborudko

平穩。謝謝，比以前的 –

更好，簡單修復就像一個魅力。 – moplin

<ion-menu type="push" [content]="content">的作品對我好

來源

2017-01-27 21:14:43 Vivek

但這給了一個laggy經驗。雖然它改變了地圖 –

在Ionic Framework 2你可能會迫使menu type能迅速解決這個問題。當發現

<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

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

我還在尋找一個解決方法，將更新。

來源

2017-03-13 17:15:56 0x1ad2

離子2本機地圖重疊側菜單

回答

相關問題