在 Google 地图 (Ionic 4) 上设置标记或圆圈的可见性后无法滚动、倾斜、旋转和缩放地图

Question

我在 ionic 4 应用程序中使用了 ionic-native/google-maps。当我进入页面时，地图 div 是可见的、可用的和可拖动的，除非我在地图上设置了一些元素。

当我点击一个按钮来设置一些标记和圆圈的可见性时，它们成功地变成了visible/invisible但是地图的手势不能正常工作。我只能向上滚动地图，但无法将其滚动到其他方向，也无法倾斜、旋转和缩放地图，除非我离开页面并再次进入页面。这是我的代码：

page.html

<div id="map_canvas"></div>
<ion-content>
  <ng-container *ngFor="let person of people">
    <ion-item (click)="showMarker(person)">
        Show Marker
    </ion-item>
  </ng-container>
</ion-content>

page.scss

#map_canvas {
  height: 40%;
}

page.ts（假设 "people" 是一个有效的数组，其中包含 "person" 个具有键 UUID 的对象。）

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMap, GoogleMaps, Environment, Marker, GoogleMapsAnimation, GoogleMapsEvent } from '@ionic-native/google-maps/ngx';


export class Page implements OnInit {


  map: GoogleMap;
  markers = {};
  circles = {};
  people = [{...}]; // contains person objects

  constructor(
    private platform: Platform,
  ) {
      this.initializeMarkers();
  }

  loadMap() {
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': (My API),
      'API_KEY_FOR_BROWSER_DEBUG': (My API),
    });
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 114,
          lng: 22,
        },
        zoom: 9,
        tilt: 0,
      },
      controls: {
        myLocationButton: true,
        myLocation: true,
        compass: true,
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: true,
        zoom: true,
      },
    });
    this.map.clear();
  }

  async initializeMarkers() {
    this.map.clear();
    this.markers = {};
    this.circles = {};
    for (const person of this.people) {
        await this.map.addMarker({
          title: person.alias,
          position: { lat: 114, lng: 22 },
          visible: false,
          animation: GoogleMapsAnimation.DROP,
        }).then(
          marker => {
            this.markers[person.uuid] = marker;
          }
        );
        await this.map.addCircle({
          radius: 30,
          center: this.markers[person.uuid].getPosition(),
          fillColor: 'rgba(0, 0, 255, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.75)',
          strokeWidth: 1,
          visible: false,
        }).then(
          circle => {
            this.circles[person.uuid] = circle;
          }
        );
        this.markers[person.uuid].bindTo('position', this.circles[person.uuid], 'center');
    }
  }

  showMarker(person: any) {
    const marker = this.markers[person.uuid];
    const circle = this.circles[person.uuid];
    if (marker.isVisible()) {
      marker.hideInfoWindow();
      marker.setVisible(false);
      circle.setVisible(false);
    } else {
      marker.showInfoWindow();
      marker.setVisible(true);
      circle.setVisible(true);
    }
    this.map.setAllGesturesEnabled(true);
  }


  ngOnInit() {
    this.platform.ready().then(() => this.loadMap());
  }

}

离子信息

Ionic:

   Ionic CLI                     : 5.4.13
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

cordova 插件列表

cordova-plugin-autostart 2.3.0 "Autostart"
cordova-plugin-background-mode 0.7.3 "BackgroundMode"
cordova-plugin-ble-central 1.2.4 "BLE"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova.plugins.diagnostic 5.0.1 "Diagnostic"

我该如何解决？谢谢。

Answer 1

解决方法如下：

<ion-content>
  <div id="map_canvas"></div>
  <ng-container *ngFor="let person of people">
    <ion-item (click)="showMarker(person)">
       Show Marker
    </ion-item>
  </ng-container>
</ion-content>

在 Google 地图 (Ionic 4) 上设置标记或圆圈的可见性后无法滚动、倾斜、旋转和缩放地图

Cannot scroll, tilt, rotate and zoom the map after setting visibility of Markers or Circles on the Google Map (Ionic 4)

cordova

ionic-framework

ionic4

ionic-native