Angular-google-maps: A janela de informações está vazando

Criado em 18 dez. 2016 · 4Comentários · Fonte: SebastianM/angular-google-maps

Descrição do problema

Se você estiver usando um marcador com uma janela de informações visível - aumento do uso da CPU em até 100% do núcleo. Testado com Chrome.

Etapas para reproduzir e uma demonstração mínima do problema

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

Passos para reproduzir:

Abra o gerenciador de tarefas do Chrome (Menu - Mais ferramentas - Gerenciador de tarefas)
Verifique se o uso da CPU por plunkr é baixo e não aumenta
Clique no botão "alternar informações" (a janela de informações deve ser exibida após o clique)
Monitore o uso da CPU por 1 minuto (você verá o crescimento ao longo do tempo)
(Opcional) Clique no botão "alternar informações" novamente (o uso da CPU permanece alto mesmo depois que a janela de informações é fechada)

Comportamento atual

O marcador com uma janela de informações aberta usa cada vez mais CPU ao longo do tempo

Comportamento esperado / desejado

Uso constante da CPU

versão angular2 e angular2-google-maps

2.1.1 e 0.16.0

Outra informação

urgent AgmInfoWindow stale bug

Fonte

shedar

👍4

Comentários muito úteis

Encontrei uma solução aqui: https://github.com/angular/angular/issues/10883#issuecomment -240423378
Então, o que fiz foi chamar infoWindow.open () / close () fora do Angular para evitar detecções de alteração:

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 em 28 nov. 2017

👍2

Todos 4 comentários

sim. Eu encontrei o mesmo problema.
E eu estou usando o angular2 também.
O motivo é que, quando a janela de informações é aberta, a página detecta mudanças repetidas vezes, como um loop. Assim, a página seria redesenhada novamente e novamente. Se apresse. é um grande problema.

zuo305 em 17 mar. 2017

Alguma atualização / progresso neste problema? @SebastianM

rgupta2 em 21 mar. 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 em 28 nov. 2017

👍2

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.