๋ฌธ์ ์ค๋ช
ํ์๋๋ ์ ๋ณด ์ฐฝ๊ณผ ํจ๊ป ๋ง์ปค๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ - CPU ์ฌ์ฉ๋์ด ์ฝ์ด์ ์ต๋ 100%๊น์ง ์ฆ๊ฐํฉ๋๋ค. Chrome์ผ๋ก ํ ์คํธํ์ต๋๋ค.
๋ฌธ์ ์ฌํ ๋จ๊ณ ๋ฐ ์ต์ํ์ ๋ฐ๋ชจ
http://plnkr.co/edit/q0ttx1XbTCnB4DFujtRV?p=preview
์ฌํ ๋จ๊ณ:
ํ์ฌ ํ๋
์ ๋ณด ์ฐฝ์ด ์ด๋ ค ์๋ ๋ง์ปค๋ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ ์ ๋ ๋ง์ CPU๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์์/์ํ๋ ํ๋
์ผ์ ํ CPU ์ฌ์ฉ๋
angular2 ๋ฐ angular2-google-maps ๋ฒ์
2.1.1 ๋ฐ 0.16.0
๊ธฐํ ์ ๋ณด
์. ๋๋ ๊ฐ์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ๋ค.
๊ทธ๋ฆฌ๊ณ 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();
});
}
์ด ๋ฌธ์ ๋ ์ต๊ทผ ํ๋์ด ์์๊ธฐ ๋๋ฌธ์ ์๋์ผ๋ก ์ค๋๋ ๊ฒ์ผ๋ก ํ์๋์์ต๋๋ค. ๋ ์ด์์ ํ๋์ด ์์ผ๋ฉด ํ์๋ฉ๋๋ค. ๊ทํ์ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฌ๊ธฐ์์ ํด๊ฒฐ์ฑ ์ ์ฐพ์์ต๋๋ค. https://github.com/angular/angular/issues/10883#issuecomment -240423378
๊ทธ๋์ ๋ด๊ฐ ํ ๊ฒ์ ๋ณ๊ฒฝ ๊ฐ์ง๋ฅผ ํผํ๊ธฐ ์ํด Angular ์ธ๋ถ์์ infoWindow.open()/close()๋ฅผ ํธ์ถํ๋ ๊ฒ์ ๋๋ค.
map.component.html
map.component.ts