Angular-google-maps: Infofenster ist undicht

Erstellt am 18. Dez. 2016  ·  4Kommentare  ·  Quelle: SebastianM/angular-google-maps

Fehlerbeschreibung

Wenn Sie einen Marker mit einem sichtbaren Infofenster verwenden, steigt die CPU-Auslastung auf bis zu 100 % des Kerns. Getestet mit Chrome.

Schritte zum Reproduzieren und eine minimale Demo des Problems

http://plnkr.co/edit/q0ttx1XbTCnB4DFujtRV?p=preview

Schritte zum Reproduzieren:

  1. Chrome-Task-Manager öffnen (Menü – Weitere Tools – Task-Manager)
  2. Überprüfen Sie, ob die CPU-Auslastung durch plunkr niedrig ist und nicht wächst
  3. Klicken Sie auf die Schaltfläche "Info umschalten" (Infofenster sollte nach dem Klick angezeigt werden)
  4. Überwachen Sie die CPU-Auslastung für 1 Minute (Sie werden sehen, wie sie mit der Zeit wächst)
  5. (Optional) Klicken Sie erneut auf die Schaltfläche "Info umschalten" (CPU-Auslastung bleibt hoch, auch wenn das Infofenster geschlossen wird)

Aktuelles Verhalten

Marker mit geöffnetem Infofenster verbraucht mit der Zeit immer mehr CPU

Erwartetes/gewünschtes Verhalten

Konstante CPU-Auslastung

angle2 & angle2-google-maps-version

2.1.1 & 0.16.0

Andere Informationen

urgent AgmInfoWindow stale bug

Hilfreichster Kommentar

Ich habe hier eine Lösung gefunden: https://github.com/angular/angular/issues/10883#issuecomment -240423378
Also habe ich infoWindow.open()/close() außerhalb von Angular aufgerufen, um Änderungserkennungen zu vermeiden:

map.component.html

<div *ngFor="let property of _properties">
  <agm-marker [latitude]="property.Lat"
              [longitude]="property.Lng"
              [iconUrl]="_markerIconUrl"
              (mouseOver)="_infoWindowOpen($event, infoWindow);"
              (mouseOut)="_infoWindowClose($event, infoWindow);">
  </agm-marker>
</div>
...
<agm-info-window #infoWindow>
</agm-info-window>

map.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
...
constructor(private _zone: NgZone) {...}
...
  private _infoWindowOpen(mouseEvent: any, infoWindow: any) {
    infoWindow.hostMarker = mouseEvent.marker;
    this._zone.runOutsideAngular(() => {
      infoWindow.open();
    });
  }
...
  private _infoWindowClose(mouseEvent: any, infoWindow: any) {
    this._zone.runOutsideAngular(() => {
      infoWindow.close();
    });
  }

Alle 4 Kommentare

Jawohl. Ich habe das gleiche Problem gefunden.
Und ich benutze auch angle2.
Der Grund ist, wenn das Infofenster geöffnet wird, würde die Seite immer wieder Änderungen erkennen, wie eine Schleife. So würde die Seite immer wieder neu gezeichnet. Beeil dich. es ist ein großes Thema.

Gibt es ein Update/Fortschritt zu diesem Thema? @SebastianM

Ich habe hier eine Lösung gefunden: https://github.com/angular/angular/issues/10883#issuecomment -240423378
Also habe ich infoWindow.open()/close() außerhalb von Angular aufgerufen, um Änderungserkennungen zu vermeiden:

map.component.html

<div *ngFor="let property of _properties">
  <agm-marker [latitude]="property.Lat"
              [longitude]="property.Lng"
              [iconUrl]="_markerIconUrl"
              (mouseOver)="_infoWindowOpen($event, infoWindow);"
              (mouseOut)="_infoWindowClose($event, infoWindow);">
  </agm-marker>
</div>
...
<agm-info-window #infoWindow>
</agm-info-window>

map.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
...
constructor(private _zone: NgZone) {...}
...
  private _infoWindowOpen(mouseEvent: any, infoWindow: any) {
    infoWindow.hostMarker = mouseEvent.marker;
    this._zone.runOutsideAngular(() => {
      infoWindow.open();
    });
  }
...
  private _infoWindowClose(mouseEvent: any, infoWindow: any) {
    this._zone.runOutsideAngular(() => {
      infoWindow.close();
    });
  }

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen