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

【问题标题】：Modify sebm-google-map-marker using an angular2 directive使用 angular2 指令修改 sebm-google-map-marker
【发布时间】：2017-04-08 07:13:41
【问题描述】：

我正在使用 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>

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。

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

【问题讨论】：

你能做一个plunkr吗？ this.socialMediaImage 未定义，因为我不相信你能做你所做的事。您需要先应用指令，然后再为输入应用单独的属性。
@Chrillewoodz 我使用此页面angular.io/docs/ts/latest/guide/attribute-directives.html 作为参考，它使用了诸如<p [myHighlight]="color" defaultColor="violet"> 之类的html。我会在创建 plunkr 时添加一条消息。
也许我正在考虑功能。无论如何，plunkr 将帮助调试。
@Chrillewoodz 我基于现有的 plunker 并添加到我的指令中。 embed.plnkr.co/kGQ6lIh21kZHXhjrBoPq

标签： angular typescript angular2-directives angular2-google-maps

【解决方案1】：

还有 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 Example，您可以在其中玩它

【讨论】：