Angular-google-maps: Pregunta: MarkerManager.getNativeMarker()

Creado en 29 sept. 2016  ·  4Comentarios  ·  Fuente: SebastianM/angular-google-maps

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);
})

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:

<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 eldirectiva sería algo como esto:

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);
      });
    }
  }

Todos 4 comentarios

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 eldirectiva sería algo como esto:

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?

¿Fue útil esta página
0 / 5 - 0 calificaciones