Angular-google-maps: 情報ウィンドウが漏れています

作成日 2016年12月18日  ·  4コメント  ·  ソース: SebastianM/angular-google-maps

問題の説明

情報ウィンドウが表示されたマーカーを使用している場合-CPU使用率はコアの100%まで増加します。 Chromeでテスト済み。

再現する手順と問題の最小限のデモ

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

再現する手順:

  1. Chromeタスクマネージャーを開きます(メニュー-その他のツール-タスクマネージャー)
  2. plunkrによるCPU使用率が低く、増加しないことを確認します
  3. 「情報の切り替え」ボタンをクリックします(クリックすると情報ウィンドウが表示されます)
  4. CPU使用率を1分間監視します(時間の経過とともに増加することがわかります)
  5. (オプション)[情報の切り替え]ボタンをもう一度クリックします(情報ウィンドウを閉じた後もCPU使用率は高いままです)

現在の動作

情報ウィンドウが開いているマーカーは、時間の経過とともにますます多くのCPUを使用します

期待される/望ましい動作

一定のCPU使用率

angle2&angular2-google-mapsバージョン

2.1.1&0.16.0

その他の情報

urgent AgmInfoWindow stale bug

最も参考になるコメント

ここで解決策を見つけました: https
したがって、変更の検出を回避するために、Angularの外部でinfoWindow.open()/ close()を呼び出します。

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

全てのコメント4件

はい。 同じ問題が見つかりました。
そして私もangular2を使っています。
その理由は、情報ウィンドウが開いたときに、ページがループのように何度も変更を検出するためです。 そのため、ページは何度も何度も再描画されます。 急げ。 それは大きな問題です。

この問題に関する更新/進捗状況はありますか? @SebastianM

ここで解決策を見つけました: https
したがって、変更の検出を回避するために、Angularの外部でinfoWindow.open()/ close()を呼び出します。

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

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

このページは役に立ちましたか?
0 / 5 - 0 評価