Angular-google-maps: Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΠΊΠ°Π΅Ρ‚

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 18 Π΄Π΅ΠΊ. 2016  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: SebastianM/angular-google-maps

ОписаниС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ с Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ - рост Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ процСссора Π΄ΠΎ 100% ΠΎΡ‚ ядра. ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π² Chrome.

Π¨Π°Π³ΠΈ ΠΏΠΎ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡŽ ΠΈ минимальная дСмонстрация ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹

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

ДСйствия ΠΏΠΎ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡŽ:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ диспСтчСр Π·Π°Π΄Π°Ρ‡ Chrome (МСню - Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструмСнты - ДиспСтчСр Π·Π°Π΄Π°Ρ‡).
  2. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° процСссора plunkr низкая ΠΈ Π½Π΅ растСт
  3. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽΒ» (послС наТатия Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ)
  4. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠΉΡ‚Π΅ использованиС ЦП Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ 1 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ (Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ ΠΎΠ½ΠΎ растСт)
  5. (ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ) НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽΒ» Π΅Ρ‰Π΅ Ρ€Π°Π· (Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ЦП остаСтся высокой Π΄Π°ΠΆΠ΅ послС закрытия ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°)

Π’Π΅ΠΊΡƒΡ‰Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅

ΠœΠ°Ρ€ΠΊΠ΅Ρ€ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ всС большС ΠΈ большС ЦП

ОТидаСмоС / ТСлаСмоС повСдСниС

ΠŸΠΎΡΡ‚ΠΎΡΠ½Π½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ЦП

вСрсия angular2 ΠΈ angular2-google-maps

2.1.1 ΠΈ 0.16.0

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация

urgent AgmInfoWindow stale bug

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― нашСл Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ здСсь: https://github.com/angular/angular/issues/10883#issuecomment -240423378
Π˜Ρ‚Π°ΠΊ, я Π²Ρ‹Π·Π²Π°Π» infoWindow.open () / close () Π²Π½Π΅ Angular, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ:

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://github.com/angular/angular/issues/10883#issuecomment -240423378
Π˜Ρ‚Π°ΠΊ, я Π²Ρ‹Π·Π²Π°Π» infoWindow.open () / close () Π²Π½Π΅ Angular, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ:

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 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ вопросы

ChrisDevinePimss picture ChrisDevinePimss  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

nthonymiller picture nthonymiller  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

Subhojit1992 picture Subhojit1992  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

ostapch picture ostapch  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

n1t3w0lf picture n1t3w0lf  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ