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

Question

[Vic Shóstak]

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

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

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

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

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

Буду рад толковым комментариям и юзкейсам! Спасибо.

Comments

[freeExec]

По лёгкому у вас не выйдет, т.к. окружности с прозрачностями и в итоге в зелёной зоне будет намешан ещё красный и жёлтый. Так что вам придётся хакнуть гугль и создать свой примитив - бублик. Или рисовать полигонами многогранниками, но это будет полный отстой.
Притом замечу, мне как клиенту по факту пифиг на круги - мне домой надо в любом случае.

Answer 1

[Anton Belichkov]

Расчет расстояния по прямой это наверно самое плохое, что можно придумать, любой таксист подтвердит. Пример - поездка на другой берег реки. Используйте зоны доступности, построенные по дорожному графу ака изохроны.

Comments

[Vic Shóstak]

Это не для расчёта километража, а для вычисления надбавки за удалённость от аэропорта/вокзала.

[Anton Belichkov]

Vikky Shostak, а по описанию я понял, что приложенька для клиента, а не для шофера. И вообще, нет бы скидку вычислять, а не надбавку ;) Ну и как бы "удалённость" это и есть километраж, не?
Я понимаю, что изохроны счиатать это целое дело. Зато картинка будет намного интереснее!

[Vic Shóstak]

Anton Belichkov, скидка – это следующий этап реализации. В том числе, и исходя из цифры по надбавке.

На самом деле, погуглив изохроны, так и не понял, как изолинии одновременности того или иного явления относятся к Google Maps API и что с ними делать :D За сим, думаю, что в моём случае обычного значения удалённости одной точки от другой – будет достаточно, а визуальные извращения с окружностями – лучше оставить для красоты и визуального ряда.

[Anton Belichkov]

Я просто оставлю это здесь https://gre4ark.livejournal.com/381328.html

[Vic Shóstak]

Anton Belichkov, ок, вот теперь ясно стало, что значение слова из БСЭ уже не актуально.

https://galton.urbica.co – интересный проект, но его концепт – излишен для данного конкретного задания. Интересно, кто-нибудь типа Убера или Яндекс.Такси используют такую технологию?