vikkyshostak
@vikkyshostak
< This head full of dreams.

Google Maps JS API. Как нарисовать несколько окружностей на карте, с разным радиусом, но с одним центром, и передать ID каждой окружности?

Приветствую.

Исходные данные:
Google Maps, фронтэнд на Vue.js, вывод карты через данные (координаты), полученные из плагина vue-google-autocomplete.

Задача №1: на основании первой точки на карте, строить вокруг неё три окружности.
Поясню. Первая окружность – например, зелёного цвета и с радиусом 2 км. Вторая – жёлтая, радиус 5 км. Ну и третья – красная, 10 км. При этом, каждая следующая окружность начинается не от середины (первой точки), а на границе с предыдущей окружностью (пример: зелёная от точки до жёлтой, жёлтая от края зелёной до красной, красная от края жёлтой).

Задача №2: при постановке второй точки (тоже по координатам, полученным из vue-google-autocomplete), присваивать технической переменной, например, ID окружности, в которую он попал. Иными словами, если вторая точка попала в жёлтую окружность – ставим const circle_zone = 2.

Процесс взаимодействия (для лучшего понимая задач): человек заказывает трансфер, например, в аэропорт. Выбирает, собственно, «аэропорт Пулково» в автокомлит-поле (спасибо Vue-плагину), далее выбирает свой адрес. Ему, рядышком с этой формой, рисуется карта, на которой он видит первую точку (аэропорт) и от неё три окружности разного цвета. Также, ставится вторая точка (его адрес) в какой-то из окружностей. Сразу же происходит расчет стоимости и прочее.

Буду рад толковым комментариям и юзкейсам! Спасибо.
  • Вопрос задан
  • 881 просмотр
Пригласить эксперта
Ответы на вопрос 1
za90
@za90
быдлокодер со стажем
Расчет расстояния по прямой это наверно самое плохое, что можно придумать, любой таксист подтвердит. Пример - поездка на другой берег реки. Используйте зоны доступности, построенные по дорожному графу ака изохроны.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы