์ง๋์ ๋์ด๋ฅผ ํ๋ฉด ํฌ๊ธฐ์ ๋ง์ถ๊ณ ์ถ์ต๋๋ค. height:100%
์๋ํ์ต๋๋ค. ํ์ง๋ง ์๋ํ์ง ์์ต๋๋ค. ์ด๋ป๊ฒ ํ๋์ง ์๋ ค์ฃผ์ค ์ ์๋์?
๊ฐ์ฌ ํด์!
๋ ๊ฐ์ ์ปจํ ์ด๋ ์์์ AGM ํ๊ทธ๋ฅผ ๋ํํฉ๋๋ค.
<div class="outer-wrapper">
<div class="map-wrapper" id="wrapper" #wrapper>
<agm-map
[latitude]="latitude"
[longitude]="longitude"
[scrollwheel]="true"
[zoom]="zoom"
(idle)="idle()"
(centerChange)="centerChange($event)"
id="AgmMap"
#AgmMap>
<agm-marker
[latitude]="latitude"
[longitude]="longitude"
[markerClickable]="true"></agm-marker>
</agm-map>
</div>
</div>
๊ทธ๋ฐ ๋ค์ ์ธ๋ถ ์ปจํ
์ด๋๋ฅผ 100%๋ก ์ค์ ํ๊ณ ๋ด๋ถ ์ปจํ
์ด๋๋ฅผ ์์์ ๋์ด๋ก ์ค์ ํฉ๋๋ค(์ค์ํ์ง ์์).
AGM ์์๋ฅผ ์ด์ ๊ฐ์ด CSS๋ฅผ ํตํด 100%๋ก ๋ง๋ญ๋๋ค.
.outer-wrapper {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
.map-wrapper {
height: 400px;
agm-map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
}
}
๊ทธ๋ฐ ๋ค์ ๊ตฌ์ฑ ์์์์ ๋ค์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ํด, centerChange ๋ฐ ํฌ๊ธฐ ์กฐ์ ์ด๋ฒคํธ๋ฅผ ์บก์ฒํฉ๋๋ค.
@HostListener('window:resize')
onWindowResize() {
this.onResize();
}
ngAfterViewInit() {
this.renderer.setElementStyle(
this.wrapper.nativeElement, 'height',
(window.innerHeight) + 'px'
);
}
onResize() {
// resize the container for the google map
this.renderer.setElementStyle(
this.wrapper.nativeElement, 'height',
(window.innerHeight ) + 'px'
);
// recenters the map to the resized area.
this.agmMap.triggerResize().then(() =>
this.agmMap._mapsWrapper.setCenter({lat: this.centerLat, lng: this.centerLng}));
}
// idle fires after paning or zooming is done.
// This is where we want to capture the center of the map.
// This way if the user resizes, the center is preserved.
idle() {
this.centerLat = this.changeLat;
this.centerLng = this.changeLng;
}
// this event fires whenever any event changes the center. Panning, zooming, or resizing.
centerChange(event: any) {
if (event) {
this.changeLat = event.lat;
this.changeLng = event.lng;
}
}
๋ํ ๋ค์ ๋ณ์๋ฅผ ์ค์ ํ์ญ์์ค.
@ViewChild('AgmMap') agmMap: any;
@ViewChild('wrapper') wrapper: ElementRef;
public latitude: number;
public longitude: number;
private centerLat: number;
private centerLng: number;
public zoom: number;
private changeLat: number;
private changeLng: number;
@angular/core ๋ฐ HostListener์ ๋ ๋๋ฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํ์ญ์์ค.
์๋ ํ์ธ์,
์๋ ํ์ธ์.
ํฌ๊ธฐ ์กฐ์ , ๋น ๋ฅธ ์ง๋ฌธ์ ์ ํฉํฉ๋๋ค. ์ฒ์ ๋ก๋ํ ๋ ์ด๊ฒ์ ์ด๋ป๊ฒ ์ค์ ํฉ๋๊น? ์น ๋ธ๋ผ์ฐ์ ์์ ํ์ด์ง๋ฅผ ๋ก๋ํ ๋ ํ์ฌ ํ๋ฉด์ ๋ง๊ฒ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ์๊ฒ ์ต๋๊น? ๊ฐ์ฌ ํด์.
๋ฌธ์ ์ธ์ฌ.
์ ์ด์ ์ด
์ ๊ฒฝ ์ฐ์ง ๋ง์ :)
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ ๊ฐ์ ์ปจํ ์ด๋ ์์์ AGM ํ๊ทธ๋ฅผ ๋ํํฉ๋๋ค.
๊ทธ๋ฐ ๋ค์ ์ธ๋ถ ์ปจํ ์ด๋๋ฅผ 100%๋ก ์ค์ ํ๊ณ ๋ด๋ถ ์ปจํ ์ด๋๋ฅผ ์์์ ๋์ด๋ก ์ค์ ํฉ๋๋ค(์ค์ํ์ง ์์).
AGM ์์๋ฅผ ์ด์ ๊ฐ์ด CSS๋ฅผ ํตํด 100%๋ก ๋ง๋ญ๋๋ค.
๊ทธ๋ฐ ๋ค์ ๊ตฌ์ฑ ์์์์ ๋ค์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ํด, centerChange ๋ฐ ํฌ๊ธฐ ์กฐ์ ์ด๋ฒคํธ๋ฅผ ์บก์ฒํฉ๋๋ค.
๋ํ ๋ค์ ๋ณ์๋ฅผ ์ค์ ํ์ญ์์ค.
@angular/core ๋ฐ HostListener์ ๋ ๋๋ฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํ์ญ์์ค.