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

В угловом приложении я создаю круги на карте 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.info("click");
    circle.setEditable(true);
  }); 

Моя проблема заключается в том, что всякий раз, когда я нажимаю на круг, только последний становится редактируемым. Моя цель — нажать на каждый круг, сделать его редактируемым, а затем применить слушателей к событиям center_changed и radius_changed.
Какие-либо предложения?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
179
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

google.maps.event.addListener(circle, 'click', (event) => {
  console.info("click");
  this.setEditable(true);
});
Ответ принят как подходящий

Я решил эту проблему, поместив каждую новую фигуру в массив, и я поймал событие щелчка, прокручивая массив:

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.info(shapes[i].circleID)
  }
}

Поэтому, когда я хочу добавить addListener к событию, я помещаю его в цикл for (let i in shapes).

Другие вопросы по теме