Question

我制作了一个Ionic V2侧面菜单应用程序并集成了一个GMaps元素。但我无法处理该地图前面的元素。侧面菜单的按钮如果位于地图前面则会被禁用，而弹出离子选择元素则会相同。

所以我的问题是，我的错误在哪里？为什么我无法处理谷歌地图元素前面的任何元素？

我无法处理红色区域：

我的地图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>

Ionic 2无法处理谷歌地图元素前面的菜单

2 个答案: