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

我使用angular2-google-maps https://angular-maps.com/來構建帶有標記的Google地圖。我想要實現的是創建一個用戶社交媒體配置文件圖片定製的標記。我打算使用這個：JS Maps v3: custom marker with user profile picture 使用angular2指令修改sebm-google-map-marker

要做到這一點，我需要修改我無法訪問的標記代碼。

模板：

<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如果未定義。

任何幫助將是偉大的，謝謝。

來源

2017-04-08 Gavin Bruce

你能做出一個plunkr？ 'this.socialMediaImage'是不確定的，因爲我不相信你可以做你所做的事情。您需要先應用指令，然後再應用輸入的單獨屬性。 – Chrillewoodz

@Chrillewoodz我用這個頁面https://angular.io/docs/ts/latest/guide/attribute-directives.html作爲參考，它使用html，比如'

'。當我創建了一個plunkr時，我會添加一條消息。 –

也許我正在考慮功能。無論如何，plunkr將有助於調試。 – Chrillewoodz

另外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在那裏你可以用它玩

來源

2017-04-14 11:02:31 yurzui

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

回答

相關問題