Salut, @SebastienM. Pouvez-vous s'il vous plaît me dire comment puis-je obtenir une instance de SebmGoogleMapMarker pour obtenir un marqueur natif ?
par exemple:
this.markerManager.getNativeMarker(INSTANCE_OF_SebmGoogleMapMarker).then((nativeMarker) => {
console.log('YEAH marker is here: ' + nativeMarker);
})
j'ai trouvé la solution
Pour les autres personnes intéressées par la solution, vous devez créer une nouvelle directive et l'imbriquer dans le composant sebm-google-map. Faites injecter l'objet MarkerManager dans ce composant, puis émettez-le avec une propriété Output pour le transmettre au composant parent. Par exemple:
<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>
Puis le
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;
})
}
}
Enfin, dans votre composant parent, utilisez le gestionnaire de marqueurs (et les marqueurs) comme suit :
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);
});
}
}
Salut @maxmumford
C'est exactement ce que je veux,
Merci beaucoup.
@maxmumford
J'ai un autre problème.
Je souhaite ajouter manuellement une fenêtre d'informations au survol du marqueur.
Voulez-vous s'il vous plaît envoyer un exemple pour cela?
Commentaire le plus utile
Pour les autres personnes intéressées par la solution, vous devez créer une nouvelle directive et l'imbriquer dans le composant sebm-google-map. Faites injecter l'objet MarkerManager dans ce composant, puis émettez-le avec une propriété Output pour le transmettre au composant parent. Par exemple:
Puis ledirective ressemblerait à ceci :
Enfin, dans votre composant parent, utilisez le gestionnaire de marqueurs (et les marqueurs) comme suit :