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. 1๋ถ„ ๋™์•ˆ CPU ์‚ฌ์šฉ๋Ÿ‰ ๋ชจ๋‹ˆํ„ฐ๋ง(์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ์ฆ๊ฐ€ํ•จ)
  5. (์„ ํƒ ์‚ฌํ•ญ) "์ •๋ณด ์ „ํ™˜" ๋ฒ„ํŠผ์„ ๋‹ค์‹œ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค(์ •๋ณด ์ฐฝ์„ ๋‹ซ์•„๋„ CPU ์‚ฌ์šฉ๋Ÿ‰์ด ๋†’๊ฒŒ ์œ ์ง€๋จ)

ํ˜„์žฌ ํ–‰๋™

์ •๋ณด ์ฐฝ์ด ์—ด๋ ค ์žˆ๋Š” ๋งˆ์ปค๋Š” ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ์ ์  ๋” ๋งŽ์€ 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
๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ํ•œ ๊ฒƒ์€ ๋ณ€๊ฒฝ ๊ฐ์ง€๋ฅผ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด 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://github.com/angular/angular/issues/10883#issuecomment -240423378
๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ํ•œ ๊ฒƒ์€ ๋ณ€๊ฒฝ ๊ฐ์ง€๋ฅผ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด 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 ๋“ฑ๊ธ‰