Google 地图侦听器在 angular2+typescript 中无法正常工作

Question

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

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

这个结构

() => {}

是箭头函数。如果没有 {} 它只会 return => 之后的值。

因此，您创建了一个 returned 函数的函数。

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

Google 地图侦听器在 angular2+typescript 中无法正常工作

Google maps listener not properly working in angular2+typescript

addeventlistener

google-maps-api-3

dom-events

typescript

angular