Angular-google-maps: Вопрос: MarkerManager.getNativeMarker()

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 29 сСнт. 2016  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: SebastianM/angular-google-maps

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, @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);
      });
    }
  }

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

я нашСл Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ заинтСрСсован Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ ΠΈ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π΅ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 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
Π£ мСня Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°.
Π― Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°.
ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΡ€ΠΈΡˆΠ»ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для этого?

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ