Angular-google-maps: рдЬрд╛рдирдХрд╛рд░реА рд╡рд┐рдВрдбреЛ рд▓реАрдХ рд╣реЛ рд░рд╣реА рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 18 рджрд┐рд╕ре░ 2016  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: SebastianM/angular-google-maps

рдореБрджреЗ рдХрд╛ рд╡рд┐рд╡рд░рдг

рдпрджрд┐ рдЖрдк рджреГрд╢реНрдпрдорд╛рди рдЬрд╛рдирдХрд╛рд░реА рд╡рд┐рдВрдбреЛ рдХреЗ рд╕рд╛рде рдорд╛рд░реНрдХрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ - CPU рдЙрдкрдпреЛрдЧ рдореЗрдВ 100% рддрдХ рдХреА рд╡реГрджреНрдзрд┐ред рдХреНрд░реЛрдо рдХреЗ рд╕рд╛рде рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ред

рдкреБрдирд░реБрддреНрдкрд╛рджрди рдХреЗ рдЪрд░рдг рдФрд░ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдиреНрдпреВрдирддрдо рдбреЗрдореЛ

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

рдкреНрд░рдЬрдирди рдХреЗ рдЪрд░рдг:

  1. Chrome рдХрд╛рд░реНрдп рдкреНрд░рдмрдВрдзрдХ рдЦреЛрд▓реЗрдВ (рдореЗрдиреВ - рдЕрдзрд┐рдХ рдЙрдкрдХрд░рдг - рдХрд╛рд░реНрдп рдкреНрд░рдмрдВрдзрдХ)
  2. рдЬрд╛рдВрдЪреЗрдВ рдХрд┐ рдкреНрд▓рдВрдХрд░ рджреНрд╡рд╛рд░рд╛ CPU рдЙрдкрдпреЛрдЧ рдХрдо рд╣реИ рдФрд░ рдмрдврд╝рддрд╛ рдирд╣реАрдВ рд╣реИ
  3. "рдЯреЙрдЧрд▓ рдЬрд╛рдирдХрд╛рд░реА" рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ (рдХреНрд▓рд┐рдХ рдХреЗ рдмрд╛рдж рдЬрд╛рдирдХрд╛рд░реА рд╡рд┐рдВрдбреЛ рджрд┐рдЦрд╛рдИ рдЬрд╛рдиреА рдЪрд╛рд╣рд┐рдП)
  4. 1 рдорд┐рдирдЯ рдХреЗ рд▓рд┐рдП CPU рдЙрдкрдпреЛрдЧ рдХреА рдирд┐рдЧрд░рд╛рдиреА рдХрд░реЗрдВ (рдЖрдк рдЗрд╕реЗ рд╕рдордп рдХреЗ рд╕рд╛рде рд╡реГрджреНрдзрд┐ рджреЗрдЦреЗрдВрдЧреЗ)
  5. (рд╡реИрдХрд▓реНрдкрд┐рдХ) рдлрд┐рд░ рд╕реЗ "рдЯреЙрдЧрд▓ рдЬрд╛рдирдХрд╛рд░реА" рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ (рд╕реВрдЪрдирд╛ рд╡рд┐рдВрдбреЛ рдмрдВрдж рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рднреА рд╕реАрдкреАрдпреВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЙрдЪреНрдЪ рд░рд╣рддрд╛ рд╣реИ)

рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░

рдЦреБрд▓реА рдЬрд╛рдирдХрд╛рд░реА рд╡рд┐рдВрдбреЛ рд╡рд╛рд▓рд╛ рдорд╛рд░реНрдХрд░ рд╕рдордп рдХреЗ рд╕рд╛рде рдЕрдзрд┐рдХ рд╕реЗ рдЕрдзрд┐рдХ CPU рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ

рдЕрдкреЗрдХреНрд╖рд┐рдд/рд╡рд╛рдВрдЫрд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░

рд▓рдЧрд╛рддрд╛рд░ CPU рдЙрдкрдпреЛрдЧ

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 ()/рдмрдВрдж () рдХреЛ рдХреЙрд▓ рдХрд░рддрд╛ рд╣реИ:

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 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╣рд╛рдВред рдореБрдЭреЗ рдПрдХ рд╣реА рдореБрджреНрджрд╛ рдорд┐рд▓рд╛ред
рдФрд░ рдореИрдВ рдХреЛрдгреАрдп 2 рдХрд╛ рднреА рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред
рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ рдЬрдм рдЬрд╛рдирдХрд╛рд░реА рд╡рд┐рдВрдбреЛ рдЦреБрд▓рддреА рд╣реИ, рддреЛ рдкреЗрдЬ рд▓реВрдк рдХреА рддрд░рд╣ рдмрд╛рд░-рдмрд╛рд░ рдмрджрд▓реЗ рдЬрд╛рдиреЗ рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдПрдЧрд╛ред рддреЛ рдкреЗрдЬ рдмрд╛рд░-рдмрд╛рд░ рдлрд┐рд░ рд╕реЗ рдЦреАрдВрдЪрд╛ рдЬрд╛рдПрдЧрд╛ред рдЬрд▓реНрджреА рдХрд░реЛред рдпрд╣ рдПрдХ рдмрдбрд╝рд╛ рдореБрджреНрджрд╛ рд╣реИред

рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рдХреЛрдИ рдЕрджреНрдпрддрди/рдкреНрд░рдЧрддрд┐? @рд╕реЗрдмреЗрд╕реНрдЯрд┐рдпрдирдПрдо

рдореБрдЭреЗ рдпрд╣рд╛рдВ рдПрдХ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓рд╛: https://github.com/angular/angular/issues/10883#issuecomment -240423378
рддреЛ рдореИрдВрдиреЗ рдЬреЛ рдХрд┐рдпрд╛ рд╡рд╣ рдкрд░рд┐рд╡рд░реНрддрди рдХреА рдкрд╣рдЪрд╛рди рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдгреАрдп рдХреЗ рдмрд╛рд╣рд░ infoWindow.open ()/рдмрдВрдж () рдХреЛ рдХреЙрд▓ рдХрд░рддрд╛ рд╣реИ:

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 рд░реЗрдЯрд┐рдВрдЧреНрд╕