Angular-google-maps: La fenêtre d'information fuit

Créé le 18 déc. 2016 · 4Commentaires · Source: SebastianM/angular-google-maps

Description du problème

Si vous utilisez un marqueur avec une fenêtre d'informations visible - Croissance de l'utilisation du processeur jusqu'à 100% du cœur. Testé avec Chrome.

Étapes à reproduire et une démo minimale du problème

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

Étapes à reproduire :

Ouvrez le gestionnaire de tâches Chrome (Menu - Plus d'outils - Gestionnaire de tâches)
Vérifiez que l'utilisation du processeur par plunkr est faible et n'augmente pas
Cliquez sur le bouton « basculer les informations » (la fenêtre d'informations doit s'afficher après le clic)
Surveillez l'utilisation du processeur pendant 1 minute (vous la verrez croître au fil du temps)
(Facultatif) Cliquez à nouveau sur le bouton "basculer les informations" (l'utilisation du processeur reste élevée même après la fermeture de la fenêtre d'informations)

Comportement actuel

Le marqueur avec une fenêtre d'informations ouverte utilise de plus en plus de CPU au fil du temps

Comportement attendu/souhaité

Utilisation constante du processeur

version angular2 & angular2-google-maps

2.1.1 & 0.16.0

Les autres informations

urgent AgmInfoWindow stale bug

Source

shedar

👍4

Commentaire le plus utile

J'ai trouvé une solution ici : https://github.com/angular/angular/issues/10883#issuecomment -240423378
Donc, ce que j'ai fait, c'est appeler infoWindow.open()/close() en dehors d'Angular pour éviter les détections de changement :

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

mybluedog24 le 28 nov. 2017

👍2

Tous les 4 commentaires

Oui. J'ai trouvé le même problème.
Et j'utilise aussi angular2.
La raison en est que lorsque la fenêtre d'information s'ouvre, la page détecte les modifications encore et encore, comme une boucle. Ainsi, la page se redessinerait encore et encore. Dépêche-toi. c'est un gros problème.

zuo305 le 17 mars 2017

Des mises à jour/progrès sur ce problème ? @SebastianM

rgupta2 le 21 mars 2017

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

mybluedog24 le 28 nov. 2017

👍2

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.