Hallo @SebastianM. Können Sie mir bitte sagen, wie ich eine Instanz von SebmGoogleMapMarker bekomme, um einen nativen Marker zu erhalten?
zum Beispiel:
this.markerManager.getNativeMarker(INSTANCE_OF_SebmGoogleMapMarker).then((nativeMarker) => {
console.log('YEAH marker is here: ' + nativeMarker);
})
Ich habe eine Lösung gefunden
Für andere, die an der Lösung interessiert sind, müssen Sie eine neue Direktive erstellen und sie in die Komponente sebm-google-map verschachteln. Lassen Sie das MarkerManager-Objekt in diese Komponente einfügen und geben Sie es dann mit einer Output-Eigenschaft aus, um es an die übergeordnete Komponente zu übergeben. Zum Beispiel:
<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>
Dann ist die
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;
})
}
}
Verwenden Sie schließlich in Ihrer übergeordneten Komponente den Marker-Manager (und Marker) wie folgt:
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);
});
}
}
Hallo @maxmumford
Genau das will ich,
Ich danke dir sehr.
@maxmumford
Ich habe noch ein Problem.
Ich möchte manuell ein Infofenster hinzufügen, wenn ich über die Markierung schwebe.
Schicken Sie bitte ein Beispiel dafür?
Hilfreichster Kommentar
Für andere, die an der Lösung interessiert sind, müssen Sie eine neue Direktive erstellen und sie in die Komponente sebm-google-map verschachteln. Lassen Sie das MarkerManager-Objekt in diese Komponente einfügen und geben Sie es dann mit einer Output-Eigenschaft aus, um es an die übergeordnete Komponente zu übergeben. Zum Beispiel:
Dann ist dieDirektive würde in etwa so aussehen:
Verwenden Sie schließlich in Ihrer übergeordneten Komponente den Marker-Manager (und Marker) wie folgt: