Question

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

如果未定义，也为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 ，您可以在其中播放

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

1 个答案: