Hola, @SebastianM. ¿Puede decirme cómo puedo obtener una instancia de SebmGoogleMapMarker para obtener un marcador nativo?
por ejemplo:
this.markerManager.getNativeMarker(INSTANCE_OF_SebmGoogleMapMarker).then((nativeMarker) => {
console.log('YEAH marker is here: ' + nativeMarker);
})
encontré solución
Para otros interesados en la solución, debe crear una nueva directiva y anidarla dentro del componente sebm-google-map. Haga que el objeto MarkerManager se inyecte en este componente, luego expúlselo con una propiedad Output para pasarlo al componente principal. Por ejemplo:
<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>
Entonces el
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;
})
}
}
Finalmente, en su componente principal, utilice el administrador de marcadores (y los marcadores) así:
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);
});
}
}
Hola @maxmumford
Eso es exactamente lo que quiero,
Muchas gracias.
@maxmumford
Tengo un problema más.
Quiero agregar manualmente una ventana de información al pasar el mouse sobre el marcador.
¿Podría por favor enviar algún ejemplo para eso?
Comentario más útil
Para otros interesados en la solución, debe crear una nueva directiva y anidarla dentro del componente sebm-google-map. Haga que el objeto MarkerManager se inyecte en este componente, luego expúlselo con una propiedad Output para pasarlo al componente principal. Por ejemplo:
Entonces eldirectiva sería algo como esto:
Finalmente, en su componente principal, utilice el administrador de marcadores (y los marcadores) así: