我用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());
});
...
}
现在我想将这个页面翻译成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中可以正常工作呢?