Сделайте несколько кругов редактируемыми на карте Google при нажатии на них и добавьте слушателя

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

Я решил это, поместив каждую новую фигуру в массив, и я ловлю событие 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) петли.

Answer 2

Используйте this внутри функции прослушивания щелчков, это ссылка на круг, который был нажат.

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