0

我正在使用 angular2-google-maps https://angular-maps.com/构建带有标记的谷歌地图。我想要实现的是创建一个使用用户社交媒体个人资料图片定制的标记。我将使用这个：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>

指令.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如果未定义也是如此。

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

4

1 回答 1

2

如果未定义，还有 this.socialMediaImage。

为什么你认为这不等于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 示例，您可以在其中使用它

于 2017-04-14T11:02:31.680 回答