Как менять радиус круга при изменении ползунка?

Question

[Арсений]

Пытаюсь сделать визуальное изменение радиуса на карте при изменении значения ползунка за пределами карты. Логика должна быть примерна такая же как на Авито в фильтре радиус/метро/район. Сначала я получаю геопозицию пользователя, ставлю маркер, от этого маркера на карте должен быть круг, радиус по умолчанию 50км. Под картой у меня ползунок слайдер (вместо радиобаттонов со скрина). Нужно чтобы при изменении значения ползунка, круг-радиус на карте тоже менялся. Чисто визуально.

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

let geolocation = ymaps.geolocation,
          myMap = new ymaps.Map('js-route-map', {
            zoom: 8,
            controls: []
          });
      myMap.controls.add('zoomControl');
      geolocation.get({
        provider: 'browser',
        mapStateAutoApply: true
      }).then(
          function (result) {
            result.geoObjects.options.set({
              iconLayout: 'default#image',
              iconImageHref: '/img/icons/map-geolocation.svg',
              iconImageSize: [20, 20]
            });
            let myCircle = new ymaps.Circle([
              result.geoObjects.position,
              this.sliders.distance*1000 // Это всё находится во vue компоненте, здесь беру текущее значение с ползунка радиуса
            ], {}, {
              fillColor: "rgba(254,37,90,0.1)",
              strokeColor: "#FE255A",
              strokeOpacity: 1,
              strokeWidth: 1
            });
            myMap.geoObjects.add(result.geoObjects);
            myMap.setZoom(8);
            myMap.geoObjects.add(myCircle);
          },
      );

Посмотрев внимательно на реализацию на Авито, я понял, что там просто добавляется круг и его размер не меняется, при выборе другого радиуса меняется масштаб карты, но сам круг нет.

Answer 1

[0xD34F]

Кладёте ссылку на круг в компонент:

this.circle = new ymaps.Circle(
  ...

И устанавливаете наблюдение за свойством, которое представляет радиус:

watch: {
  радиусКруга(val) {
    this.circle.geometry.setRadius(val);
  },
  ...

https://jsfiddle.net/5qmrxez0/

Или, если этот круг нигде больше не понадобиться, то можно не делать его свойством компонента, а прямо по месту его создания установить наблюдение за радиусом:

const circle = new ymaps.Circle(
  ...
);

this.$watch('радиусКруга', val => circle.geometry.setRadius(val));

https://jsfiddle.net/5qmrxez0/1/

Comments

[Арсений]

Вы правы, изменил название.
Спасибо за решение, попробую!

[Арсений]

0xD34F всё работает, ещё раз огромное спасибо!

[Арсений]

0xD34F извините за дополнительный вопрос, но может быть вы ещё подскажите как при изменении позиции ползунка ещё менять zoom?

[0xD34F]

Арсений, вот список методов карты, найдите себе подходящий.