Невозможно прокручивать, наклонять, поворачивать и масштабировать карту после настройки видимости маркеров или кругов на карте Google (Ioni c 4) - PullRequest
Новая
       47

Невозможно прокручивать, наклонять, поворачивать и масштабировать карту после настройки видимости маркеров или кругов на карте Google (Ioni c 4)

0 голосов
/ 21 января 2020

Я использовал ioni c -native / google-maps в моем приложении ioni c 4. Карта Div является видимой, функциональной и перетаскиваемой при входе на страницу, если только я не установил что-то из элементов на карте.

Когда я нажимаю кнопку, чтобы установить видимость некоторых маркеров и кругов, они становятся видимыми / невидимыми, но жест карты работает неправильно. Я могу только прокрутить карту вверх, но не смог прокрутить ее в других направлениях, а также наклонить, повернуть и изменить масштаб карты, если я не уйду со страницы и снова зайду на страницу. Вот мой код:

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.s css

#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());
  }

}

ioni c info 

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"

Как следует Я чиню это? Спасибо.

1 Ответ

0 голосов
/ 21 января 2020

Вот решение: 

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