Извлечение маршрутов Google Map в виде фигуры

У нас есть очень простой пример маршрута перехода в веб-карте Google. Рассмотрим ссылка на следующий пример. Или изображение ниже.

Извлечение маршрутов Google Map в виде фигуры.

Мой вопрос в том, как получить эта форма маршрута с помощью какого-либо Map API (может быть, не Google)? Поэтому я пытаюсь сделать скрипт, в который я могу вставить много точек назначения, а на выходе должно быть форма переходных путей. Даже я могу сделать форму с OpenCV, все, что мне нужно, это просто миниатюра такого маршрута.


  • Что я пробовал до сих пор? Он использует Google Map Static API для создания эскиза. Однако из документации невозможно создать такое представление маршрутов. Используя поле path в Static API с теми же точками назначения (указанными в ссылке выше), у нас будут только линии соединения. Пример ниже и ссылка на запрос карты.

Извлечение маршрутов Google Map в виде фигуры

  • А если расставить точки в соответствующем порядке? Поясню, почему порядок в данном случае не поможет. Проверьте другой пример здесь. Или первое изображение ниже. Теперь давайте перенесем эти точки в Static Map API. И у вас будет второе изображение ниже. Или эта ссылка на запрос API. Так что дело не в порядке, но поведение (что очевидно, очень разные приложения).

Извлечение маршрутов Google Map в виде фигуры

Извлечение маршрутов Google Map в виде фигуры

А если расставить точки в соответствующем порядке?

MrUpsidown 03.04.2019 12:15

@MrUpsidown Дело не в порядке, а в их поведении. Порядок на обеих картинках одинаков, но на первой Google Maps выбирает маршруты перехода. Где второй, просто абсолютный путь между ними. Другое дело, что это в очень сложных формах, порядок отследить не получится.

GensaGames 03.04.2019 12:31

В первом примере он идет от (1) 18 Taft av. до (2) 2-22 Taft av. затем (3) 59 Woodrow av. что означает, что путь возвращается по своей собственной дорожке. В примере со статическими картами вы просто используете точки 1, затем 2, затем 3 (это просто путь, а не запрос Directions!). Поэтому, если вам нужно то же самое, вам понадобятся точки 1, затем 2, затем 1, затем 3 и т. д. или вам нужно изменить порядок точек (2, 1, 3, 4, 5).

MrUpsidown 03.04.2019 12:39

@MrUpsidown Проверьте мои новые примеры изображений выше. Вам не нужно много, чтобы понять, почему это не работает. Спасибо.

GensaGames 03.04.2019 12:48

Очевидно, как я сказал выше... Вы запрашиваете Направления с веб-сайта Google Maps и запрашиваете только дорожка для отображения в Maps Static API. Это 2 очень разные вещи.

MrUpsidown 03.04.2019 12:51

@MrUpsidown Тогда почему ты спросил о appropriate order?

GensaGames 03.04.2019 12:52

Потому что в первом примере, который вы привели, если бы они были в том порядке, который я считаю подходящим, у вас был бы один и тот же путь (более или менее...), поскольку ваш путь довольно прост. Но давайте забудем об этом. Чтобы ответить на ваш вопрос, вы должны запросить Directions с помощью Maps API (Javascript или веб-служба Directions), затем извлечь его путь, а затем запросить этот путь для отображения в Maps Static.

MrUpsidown 03.04.2019 12:54

Несколько вещей, которые вы, возможно, захотите отметить: API Directions ограничивает вас в количестве путевых точек, которые вы можете использовать в своих запросах. Не уверен, что это также относится к количеству точек, которые вы можете добавить к пути в Maps Static API. Тем не менее, вместо использования параметра пути вы можете использовать закодированная полилиния, который вы также получите через запрос Directions.

MrUpsidown 03.04.2019 13:06
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
8
1 234
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш вопрос сейчас слишком широк, и таким будет мой ответ, но я подытожу здесь то, что вы делаете мог.

  1. Запросите маршрут с помощью JS-API или API маршрутов.
  2. Используйте Путевые точки в своем запросе, чтобы указать каждую точку. Предупреждение: применяются ограничения (23 путевых точки + пункт отправления и пункт назначения).
  3. В своем ответе Directions вы можете использовать либо overview_path, либо overview_polyline, чтобы нарисовать тот же маршрут в Maps Static API. Обратите внимание, что оба являются упрощенный путями (сглаженными), которые менее точны, чем точная полилиния, которую вы получаете от API. Возможно, этого достаточно для вашего варианта использования. Подробнее здесь.
  4. В качестве альтернативы, если вам нужны точные координаты полилинии, вам придется извлечь их из каждого НаправленияШаг, возвращаемого API.
  5. Когда у вас есть точки пути (или закодированная полилиния), вы можете запросить Путь к статическому API Карт (также см. информацию о закодированных полилиниях внизу этой страницы).

Надеюсь это поможет.

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