angular - 谷歌地图监听器无法在 angular2+typescript 中正常工作

Question

我用 html+js+jquery 写了一个小网站，用的是 Google maps api v3。在 map 上，您可以绘制多段线，这是可能的，因为 map 上有事件处理程序，例如

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

    });
  ...
}

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