Question

在有角度的应用程序中，我使用以下循环在google地图上创建圆：

for (this.ind in circles) {
  var circle = new google.maps.Circle({
    center: circles[this.ind].center,
    radius: circles[this.ind].radius,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    map: map
  });

}

创建圆后，我想单击每个圆并使其可编辑，因此在循环内（在大括号前）包括以下内容：

  google.maps.event.addListener(circle, 'click', (event) => {
    console.log("click");
    circle.setEditable(true);
  });

我的问题是，每当我单击一个圆圈时，只有最后一个变为可编辑状态。我的目标是单击每个圆圈，使其可编辑，然后将侦听器应用于center_changed和radius_changed事件。
有什么建议吗？

Answer 1

在点击侦听器函数中使用this，它是对被点击的圆圈的引用。

google.maps.event.addListener(circle, 'click', (event) => {
  console.log("click");
  this.setEditable(true);
});

Answer 2

我通过将每个新形状放入数组来解决它，并通过遍历数组来捕获click事件：

let a = 0;
let indx;
let shapes = [];

for (indx in circles) {
  var circle = new google.maps.Circle({
    circleID: a,
    center: circles[indx].center,
    radius: circles[indx].radius,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    // editable: true,
    map: map
  });

  a++;
  shapes.push(circle);
}

for (let i in shapes) {
  google.maps.event.addListener(shapes[i], 'click', (event) => {
    console.log(shapes[i].circleID)
  }
}

因此，当我想在事件上添加addListener时，我将其放在for (let i in shapes)循环中。

单击并添加侦听器时，使几个圆圈在Google地图上可编辑

2 个答案: