谷歌地图听众没有在angular2 + typescript中正常工作

Question

我写了一个带有html + js + jquery的小型网站，并使用了google maps 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组件。我知道eventhandling也许应该不会以这种方式做，但我不知道如何做到这一点，否则......

我可以在第一线更改为

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

，这将工作如预期。但（！）

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"); 

    }); 
    ... 
} 

将无法​​正常工作。我不明白为什么可以将eventlistener添加到地图中，而不是添加到该地图上的标记。是因为新的侦听器在事件处理中添加了另一个元素吗？但如果是这样，为什么它在纯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