谷歌地图监听器无法在 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());
    });
 ...
}

现在我想把这个页面翻译成一个 angular2 组件。我知道事件处理可能不应该以这种方式完成，但我不知道该怎么做......

我可以把第一行改成

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

    });
  ...
}

行不通。我不明白为什么可以将事件侦听器添加到地图中，但不能添加到该地图上的标记中。是因为在另一个元素的事件处理中添加了新的侦听器吗？但如果是这样，为什么它在纯 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");
});

这个结构

() => {}

是一个箭头函数。如果没有{}，它只会返回=>之后的值。

所以你创建了一个返回函数的函数。

更多信息在这里：https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html