Приветствую.
Исходные данные:
Google Maps, фронтэнд на Vue.js, вывод карты через данные (координаты), полученные из плагина
vue-google-autocomplete.
Задача №1: на основании первой точки на карте, строить вокруг неё три окружности.
Поясню. Первая окружность – например, зелёного цвета и с радиусом 2 км. Вторая – жёлтая, радиус 5 км. Ну и третья – красная, 10 км. При этом, каждая следующая окружность начинается не от середины (первой точки), а на границе с предыдущей окружностью (пример: зелёная от точки до жёлтой, жёлтая от края зелёной до красной, красная от края жёлтой).
Задача №2: при постановке второй точки (тоже по координатам, полученным из vue-google-autocomplete), присваивать технической переменной, например, ID окружности, в которую он попал. Иными словами, если вторая точка попала в жёлтую окружность – ставим
const circle_zone = 2.
Процесс взаимодействия (для лучшего понимая задач): человек заказывает трансфер, например, в аэропорт. Выбирает, собственно, «аэропорт Пулково» в автокомлит-поле (спасибо Vue-плагину), далее выбирает свой адрес. Ему, рядышком с этой формой, рисуется карта, на которой он видит первую точку (аэропорт) и от неё три окружности разного цвета. Также, ставится вторая точка (его адрес) в какой-то из окружностей. Сразу же происходит расчет стоимости и прочее.
Буду рад толковым комментариям и юзкейсам! Спасибо.
