angle2 + typescriptで正しく動作していないGoogleマップリスナー

Question

html + js + jqueryの小さなウェブサイトを作成し、Googleマップapi v3を使用しました。マップ上では、ポリラインを描くことができます。これは、マップ上のイベントハンドラのために可能です。

map.addListener('click', addLatLng); 

と

function addLatLng(event) { 
    // Add a new marker at the new plotted point on the polyline. 
    polyline.getPath().push(event.latLng); 

    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     draggable: true, 
     map: map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 5 
     } 
    }) 

    var i = gmarkers.length; 
    marker.addListener('drag', function() { 
     polyline.getPath().setAt(i, marker.getPosition()); 
    }); 
... 
} 

今私は、このページがandular2コンポーネントに変換します。私は

this.map.addListener('click', (event) => this.addLatLng(event)); 

に最初の行を変更することができ、これは動作します私はeventhandlingは多分その方法で行われるべきではないことを知っているが、私はそうでない場合はどのように行うのか分からない...

思惑通り。 BUT（！）

addLatLng(event) { 
    // Add a new marker at the new plotted point on the polyline. 
    this.polyline.getPath().push(event.latLng); 

    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     draggable: true, 
     map: this.map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 5 
     } 
    }) 


    var i = this.gmarkers.length; 

    marker.addListener('drag',() => function() { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
     console.log("drag listening"); 

    }); 
    ... 
} 

は動作しません。イベントリスナーをマップに追加できますが、そのマップ上のマーカーに追加することはできません。なぜなら、新しいリスナーは別の要素のイベント処理内に追加されているからですか？しかしもしそうなら、それはなぜ純粋なjavascriptで動作していたのですか？あなたがこのめちゃくちゃ

Answer 1

：

marker.addListener('click',() => function() { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
    console.log("drag listening"); 
}); 

をそれはそのようにする必要があります：

marker.addListener('drag',() => { 
    // this.polyline.getPath().setAt(i, marker.getPosition()); 
    console.log("drag listening"); 
}); 

これは

() => {} 

を構築するには、矢印関数です。 {}がない場合は、=>の後の値を返します。

したがって、関数を返した関数を作成しました。ここ

もっとinformationes：https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html