使用 angular2 指令修改 sebm-google-map-marker

Question

我正在使用 angular2-google-maps https://angular-maps.com/ to build a google map with markers. What I'm trying to achieve is creating a marker which is customised with an users social media profile pic. I am going to use this: JS Maps v3: custom marker with user profile picture

为此，我需要修改我无法访问的标记代码。

模板：

<sebm-google-map-marker
  [latitude]="lat"
  [longitude]="lon"
  [appSocialMediaGoogleMapMarker]="'assets/img/temp/profile-image.png'"
  >
</sebm-google-map-marker>

directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { GoogleMapsAPIWrapper, MarkerManager, SebmGoogleMapMarker } from 'angular2-google-maps/core';

@Directive({
  selector: '[appSocialMediaGoogleMapMarker]'
})
export class SocialMediaGoogleMapMarkerDirective {
  @Input('appSocialMediaGoogleMapMarker') socialMediaImage: string;

  constructor(
    el: ElementRef,
    private gmapsApi: GoogleMapsAPIWrapper,
    private markerManager: MarkerManager
  ) {

    this.gmapsApi.getNativeMap().then(map => {
      this.markerManager.getNativeMarker(el.nativeElement).then(marker => {

      });
    });

    console.log(this.socialMediaImage);

  }
}

我得到的错误是

Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined

发生在这条线上：

this.markerManager.getNativeMarker(el.nativeElement).then(marker => {

如果未定义，也 this.socialMediaImage。

任何帮助都会很棒，谢谢。

Answer 1

Also this.socialMediaImage if undefined.

为什么您认为这不等于 undefined？为什么？

您正试图在构造函数中获取 @Input 属性。您需要使用 ngOnInit 钩子来获取实例化输入属性.

那么你无法从 nativeElement

获取原生标记

this.markerManager.getNativeMarker(el.nativeElement)

使用以下内容：

import { SebmGoogleMapMarker } from 'angular2-google-maps/core';

constructor(
  ...
  private sebmMarker: SebmGoogleMapMarker
) {}
...
this.markerManager.getNativeMarker(this.sebmMarker).then...

我创建了 Plunker Example，您可以在那里玩

使用 angular2 指令修改 sebm-google-map-marker

Modify sebm-google-map-marker using an angular2 directive

angular

typescript

angular2-directives

angular2-google-maps