Ionic 2 Googleマップの要素の前にメニューを処理できません

Question

Ionic V2のサイドメニューアプリケーションを作成し、GMaps要素に統合しました。しかし、私はその地図の前にある要素を扱うことができません。サイドメニューのボタンはマップの前にある場合は無効になり、イオン選択エレメントのポップアップの場合は同じになります。

私の質問は、私の間違いはどこですか？なぜGoogleマップ要素の前の要素を処理できないのですか？私は、ゾーンを扱うことができない

は赤で乗：

マイマップのHTMLコード：

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Carte</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <ion-row center> 
    <ion-col width-25 center> 
     <ion-label>Jours :</ion-label> 
    </ion-col> 
    <ion-col width-25 center> 
     <ion-select [(ngModel)]="gender"> 
     <ion-option value="f" selected="true">Female</ion-option> 
     <ion-option value="m">Male</ion-option> 
     </ion-select> 
    </ion-col> 
    <ion-col width-25 center> 
     <ion-label>Horaires :</ion-label> 
    </ion-col> 
    <ion-col width-25 center> 
     <ion-select [(ngModel)]="gender"> 
     <ion-option value="f" selected="true">Female</ion-option> 
     <ion-option value="m">Male</ion-option> 
     </ion-select> 
    </ion-col> 
    </ion-row> 
    <div #map id="map" style="height:90%;"></div> 
</ion-content> 

マイマップTSコード：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions, GoogleMapsMarker } from 'ionic-native'; 

@Component({ 
    selector: 'page-gmap', 
    templateUrl: 'gmap.html' 
}) 
export class GMap { 

    constructor(public navCtrl: NavController) {} 

    ngAfterViewInit() { 
    this.loadMap(); 
    } 

    loadMap() { 
    let element: HTMLElement = document.getElementById('map'); 
    let map = new GoogleMap(element); 

    // listen to MAP_READY event 
    map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!')); 
    // create LatLng object 
    let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802); 
    // create CameraPosition 
    let position: CameraPosition = { 
     target: ionic, 
     zoom: 18, 
     tilt: 30 
    }; 
    // move the map's camera to position 
    map.moveCamera(position); 
    // create new marker 
    let markerOptions: GoogleMapsMarkerOptions = { 
     position: ionic, 
     title: 'Ionic' 
    }; 

    map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => { 
     marker.showInfoWindow(); 
    }); 
} 
} 

Answer 1

試してみますこの...

// handle side menu issue... 
let leftMenu = this.menuController.get('left'); 

if (leftMenu) { 
    leftMenu.ionOpen.subscribe(() => { 
    if (this.map) { 
     this.map.setClickable(false); 
    } 
    }); 

    leftMenu.ionClose.subscribe(() => { 
    if (this.map) { 
     this.map.setClickable(true); 
    } 
    }); 
} 

Answer 2

マップ上のすべての要素をクリックできるようにするには、マップがリンクされたdiv内にある必要があります。

だからあなたのコードは次のようになります。

<ion-header> 
    <ion-navbar> 
     <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Carte</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <div #map id="map" style="height:90%;"> 
     <ion-row center> 
      <ion-col width-25 center> 
       <ion-label>Jours :</ion-label> 
      </ion-col> 
      <ion-col width-25 center> 
       <ion-select [(ngModel)]="gender"> 
        <ion-option value="f" selected="true">Female</ion-option> 
        <ion-option value="m">Male</ion-option> 
       </ion-select> 
      </ion-col> 
      <ion-col width-25 center> 
       <ion-label>Horaires :</ion-label> 
      </ion-col> 
      <ion-col width-25 center> 
       <ion-select [(ngModel)]="gender"> 
        <ion-option value="f" selected="true">Female</ion-option> 
        <ion-option value="m">Male</ion-option> 
       </ion-select> 
      </ion-col> 
     </ion-row> 
    </div> 
</ion-content>