์๋ ํ์ธ์ @SebastianM์ ๋๋ค. ๋ค์ดํฐ๋ธ ๋ง์ปค๋ฅผ ์ป๊ธฐ ์ํด SebmGoogleMapMarker์ ์ธ์คํด์ค๋ฅผ ์ป๋ ๋ฐฉ๋ฒ์ ์๋ ค์ฃผ์๊ฒ ์ต๋๊น?
์๋ฅผ ๋ค์ด:
this.markerManager.getNativeMarker(INSTANCE_OF_SebmGoogleMapMarker).then((nativeMarker) => {
console.log('YEAH marker is here: ' + nativeMarker);
})
ํด๊ฒฐ์ฑ ์ ์ฐพ์์ต๋๋ค
์๋ฃจ์ ์ ๊ด์ฌ์ด ์๋ ๋ค๋ฅธ ์ฌ์ฉ์์ ๊ฒฝ์ฐ ์ ์ง์๋ฌธ์ ์์ฑํ๊ณ sebm-google-map ๊ตฌ์ฑ์์ ๋ด๋ถ์ ์ค์ฒฉํด์ผ ํฉ๋๋ค. MarkerManager ๊ฐ์ฒด๋ฅผ ์ด ๊ตฌ์ฑ ์์์ ์ฝ์ ํ ๋ค์ Output ์์ฑ๊ณผ ํจ๊ป ๋ด๋ณด๋ด์ด ๋ถ๋ชจ ๊ตฌ์ฑ ์์์ ์ ๋ฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด:
<my-parent-component>
<sebm-google-map>
<get-map-objects (markerManager)="setMarkerManager($event)">
<sebm-google-map-marker ... ></sebm-google-map-marker>
</get-map-objects>
</sebm-google-map>
</my-parent-component>
๊ทธ๋ฐ ๋ค์
import { Directive, Output, EventEmitter, AfterViewInit, ContentChildren, QueryList } from '@angular/core';
import { GoogleMapsAPIWrapper, MarkerManager, SebmGoogleMapMarker } from 'angular2-google-maps/core';
@Directive({
selector: 'get-map-objects',
})
export class GetMapObjectsDirective implements AfterViewInit {
/**
* Get native map object
*/
private _map: any = null;
@Output('map') mapChanged: EventEmitter<any> = new EventEmitter<any>();
set map(val){
this._map = val;
this.mapChanged.emit(val);
}
get map(){
return this._map;
}
/**
* Get marker manager
*/
private _markerManager: any = null;
@Output('markerManager') markerManagerChanged: EventEmitter<MarkerManager> = new EventEmitter<MarkerManager>();
set markerManager(val){
this._markerManager = val;
this.markerManagerChanged.emit(val);
}
get markerManager(){
return this._markerManager;
}
/**
* Get sebm markers
*/
private _markers: any = null;
@Output('markers') markersChanged: EventEmitter<SebmGoogleMapMarker[]> = new EventEmitter<SebmGoogleMapMarker[]>();
set markers(val){
this._markers = val;
this.markersChanged.emit(val);
}
get markers(){
return this._markers;
}
@ContentChildren(SebmGoogleMapMarker) markerChildren: QueryList<SebmGoogleMapMarker>;
constructor(
private googleMapsWrapper: GoogleMapsAPIWrapper,
private googleMarkerManager: MarkerManager
) { }
ngAfterViewInit() {
// get native map
this.googleMapsWrapper.getNativeMap().then(map => {
this.map = map;
}, error => {
throw error;
})
// get marker manager
this.markerManager = this.googleMarkerManager;
// get markers
this.markerChildren.changes.subscribe(markers => {
this.markers = markers._results;
})
}
}
๋ง์ง๋ง์ผ๋ก ์์ ๊ตฌ์ฑ ์์์์ ๋ค์๊ณผ ๊ฐ์ด ๋ง์ปค ๊ด๋ฆฌ์(๋ฐ ๋ง์ปค)๋ฅผ ์ฌ์ฉํฉ๋๋ค.
setMarkerManager(markerManager: MarkerManager){
this.markerManager = markerManager;
}
/**
* Sets the markers, used by spidifier
*/
setMarkers(markers: SebmGoogleMapMarker[]){
this.markers = markers;
for(let marker of markers){
this.markerManager.getNativeMarker(marker).then(marker => {
this.overlappingMarkerSpidifier.addMarker(marker);
});
}
}
์๋
ํ์ธ์ @maxmumford
๋ด๊ฐ ์ ํํ ์ํ๋ ๊ฒ,
์ ๋ง ๊ณ ๋ง์ต๋๋ค.
@maxmumford
๋ฌธ์ ๊ฐ ํ๋ ๋ ์์ต๋๋ค.
๋ง์ปค๋ฅผ ๊ฐ๋ฆฌํฌ ๋ ์๋์ผ๋ก ์ ๋ณด ์ฐฝ์ ์ถ๊ฐํ๊ณ ์ถ์ต๋๋ค.
๊ทธ์ ๋ํ ์์๋ฅผ ๋ณด๋ด์ฃผ์๊ฒ ์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ฃจ์ ์ ๊ด์ฌ์ด ์๋ ๋ค๋ฅธ ์ฌ์ฉ์์ ๊ฒฝ์ฐ ์ ์ง์๋ฌธ์ ์์ฑํ๊ณ sebm-google-map ๊ตฌ์ฑ์์ ๋ด๋ถ์ ์ค์ฒฉํด์ผ ํฉ๋๋ค. MarkerManager ๊ฐ์ฒด๋ฅผ ์ด ๊ตฌ์ฑ ์์์ ์ฝ์ ํ ๋ค์ Output ์์ฑ๊ณผ ํจ๊ป ๋ด๋ณด๋ด์ด ๋ถ๋ชจ ๊ตฌ์ฑ ์์์ ์ ๋ฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด:
๊ทธ๋ฐ ๋ค์์ง์๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก ์์ ๊ตฌ์ฑ ์์์์ ๋ค์๊ณผ ๊ฐ์ด ๋ง์ปค ๊ด๋ฆฌ์(๋ฐ ๋ง์ปค)๋ฅผ ์ฌ์ฉํฉ๋๋ค.