Служба маршрутов

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Вы можете рассчитать направления (с использованием различных способов транспортировки) с помощью объекта DirectionsService . Этот объект взаимодействует со службой маршрутов Google Maps API, которая получает запросы направления и возвращает эффективный путь. Время в пути является основным оптимизируемым фактором, но могут учитываться и другие факторы, такие как расстояние, количество поворотов и многие другие. Вы можете либо обработать эти результаты маршрутов самостоятельно, либо использовать объект DirectionsRenderer для визуализации этих результатов.

При указании пункта отправления или назначения в запросе направления можно указать строку запроса (например, «Чикаго, Иллинойс» или «Дарвин, Новый Южный Уэльс, Австралия»), значение LatLng или объект Place .

Служба Directions может возвращать составные направления, используя ряд путевых точек. Направления отображаются в виде ломаной линии, рисующей маршрут на карте, или дополнительно в виде серии текстовых описаний внутри элемента <div> (например, «Поверните направо на съезд Вильямсбургского моста»).

Начиная

Прежде чем использовать службу Directions в Maps JavaScript API, сначала убедитесь, что Directions API включен в Google Cloud Console в том же проекте, который вы настроили для Maps JavaScript API.

Чтобы просмотреть список включенных API:

  1. Перейдите в облачную консоль Google .
  2. Нажмите кнопку « Выбрать проект» , затем выберите тот же проект, который вы настроили для Maps JavaScript API, и нажмите « Открыть » .
  3. В списке API на панели инструментов найдите Directions API .
  4. Если вы видите API в списке, все готово. Если API нет в списке, включите его:
    1. В верхней части страницы выберите ВКЛЮЧИТЬ API , чтобы отобразить вкладку « Библиотека ». Кроме того, в левом боковом меню выберите « Библиотека ».
    2. Найдите Directions API и выберите его в списке результатов.
    3. Выберите ВКЛЮЧИТЬ . Когда процесс завершится, Directions API появится в списке API на панели инструментов .

Ценообразование и политика

Цены

С 16 июля 2018 г. для Карт, Маршрутов и Мест вступил в силу новый тарифный план с оплатой по мере использования. Чтобы узнать больше о новых ценах и ограничениях на использование службы маршрутов JavaScript, см. раздел Использование и выставление счетов для API маршрутов.

Ограничения скорости

Обратите внимание на следующие ограничения скорости дополнительных запросов:

Ограничение скорости применяется к сеансу пользователя, независимо от того, сколько пользователей совместно используют один и тот же проект. Когда вы впервые загружаете API, вам выделяется начальная квота запросов. После того, как вы используете эту квоту, API применяет ограничения скорости для дополнительных запросов на посекундной основе. Если за определенный период времени сделано слишком много запросов, API возвращает код ответа OVER_QUERY_LIMIT .

Ограничение скорости на сеанс предотвращает использование клиентских служб для пакетных запросов. Для пакетных запросов используйте веб-сервис Directions API .

Политики

Использование службы Directions должно осуществляться в соответствии с политиками, описанными для Directions API .

Запросы направления

Доступ к службе «Маршруты» является асинхронным, поскольку API Карт Google должен выполнить вызов на внешний сервер. По этой причине вам необходимо передать метод обратного вызова для выполнения после завершения запроса. Этот метод обратного вызова должен обрабатывать результаты. Обратите внимание, что служба Directions может возвращать более одного возможного маршрута в виде массива отдельных routes[] .

Чтобы использовать маршруты в Maps JavaScript API, создайте объект типа DirectionsService и вызовите DirectionsService.route() , чтобы инициировать запрос к службе Directions, передав ему литерал объекта DirectionsRequest , содержащий условия ввода и метод обратного вызова, который будет выполняться при получении запроса. ответ.

Литерал объекта DirectionsRequest содержит следующие поля:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Эти поля описаны ниже:

  • origin ( обязательный ) указывает начальное местоположение, из которого рассчитывается направление. Это значение может быть указано как String (например, «Чикаго, Иллинойс»), как значение LatLng или как объект Place . Если вы используете объект Place , вы можете указать идентификатор места , строку запроса или LatLng . Вы можете получить идентификаторы мест из служб геокодирования, поиска мест и автозаполнения мест в Maps JavaScript API. Пример использования идентификаторов мест из автозаполнения мест см. в разделе Автозаполнение мест и маршруты .
  • destination ( обязательный ) указывает конечную точку, до которой необходимо рассчитать направление. Параметры такие же, как и для поля origin , описанного выше.
  • travelMode ( обязательно ) указывает, какой вид транспорта использовать при расчете направления. Допустимые значения указаны ниже в разделе «Режимы передвижения».
  • transitOptions ( необязательный параметр) указываются значения, применимые только к запросам, в которых travelMode имеет значение TRANSIT . Допустимые значения описаны в разделе «Параметры транзита » ниже.
  • drivingOptions ( необязательный ) задает значения, применимые только к запросам, для которых travelMode имеет значение DRIVING . Допустимые значения описаны в разделе «Параметры вождения » ниже.
  • unitSystem ( необязательный ) указывает, какую систему единиц использовать при отображении результатов. Допустимые значения указаны в системе единиц ниже.

  • waypoints[] ( необязательный ) указывает массив DirectionsWaypoint s. Путевые точки изменяют маршрут, прокладывая его через указанные места. Путевая точка указывается как литерал объекта с полями, показанными ниже:

    • location указывает местоположение путевой точки в виде LatLng , в виде объекта Place или в виде String , которая будет геокодирована.
    • stopover — это логическое значение, указывающее, что путевая точка является остановкой на маршруте, что приводит к разделению маршрута на два маршрута.

    (Для получения дополнительной информации о путевых точках см. Использование путевых точек в маршрутах ниже.)

  • optimizeWaypoints ( необязательный ) указывает, что маршрут с использованием предоставленных waypoints может быть оптимизирован путем перестановки путевых точек в более эффективном порядке. Если установлено значение true , служба Directions вернет переупорядоченные waypoints в поле waypoint_order (дополнительную информацию см. в разделе Использование путевых точек в маршрутах ниже).
  • provideRouteAlternatives ( необязательный ), если для него задано значение true , указывает, что служба Directions может предоставить более одного альтернативного маршрута в ответе. Обратите внимание, что предоставление альтернативных маршрутов может увеличить время отклика сервера. Это доступно только для запросов без промежуточных путевых точек.
  • avoidFerries ( необязательный ), если установлено значение true , указывает, что рассчитанный маршрут (маршруты) должен избегать паромов, если это возможно.
  • avoidHighways ( необязательный ), если установлено значение true , указывает, что рассчитанный маршрут (маршруты) должен по возможности избегать основных автомагистралей.
  • avoidTolls ( необязательный параметр) задано значение true , он указывает, что рассчитанный маршрут (маршруты) должен по возможности избегать платных дорог.
  • region ( необязательный ) указывает код региона, указанный как двухсимвольное значение ccTLD («домен верхнего уровня»). (Для получения дополнительной информации см. Смещение региона ниже.)

Ниже приведен пример DirectionsRequest :

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Режимы передвижения

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

  • DRIVING (по умолчанию ) указывает стандартные направления движения с использованием дорожной сети.
  • BICYCLING запрашивает велосипедные маршруты по велосипедным дорожкам и предпочитаемым улицам.
  • TRANSIT запрашивает маршруты через маршруты общественного транспорта.
  • WALKING запрашивает пешеходные маршруты по пешеходным дорожкам и тротуарам.

Обратитесь к сведениям о покрытии платформы Google Maps , чтобы определить, в какой степени страна поддерживает маршруты. Если вы запрашиваете маршруты для региона, в котором этот тип направления недоступен, ответ вернет DirectionsStatus =" ZERO_RESULTS ".

Примечание . Пешеходные маршруты могут не включать в себя четкие пешеходные дорожки, поэтому пешеходные маршруты будут возвращать предупреждения в DirectionsResult , которые необходимо отобразить, если вы не используете DirectionsRenderer по умолчанию.

Варианты транзита

Доступные варианты запроса маршрута различаются в зависимости от режима движения. При запросе маршрутов общественного транспорта avoidHighways , avoidTolls , waypoints[] и optimizeWaypoints будут игнорироваться. Вы можете указать определенные параметры маршрутизации для транзита через литерал объекта TransitOptions .

Направления транзита зависят от времени. Направления будут возвращены только для раз в будущем.

Литерал объекта TransitOptions содержит следующие поля:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

Эти поля описаны ниже:

  • arrivalTime ( необязательный ) указывает желаемое время прибытия в виде объекта Date . Если указано время прибытия, время отправления игнорируется.
  • departureTime ( необязательный ) указывает желаемое время отправления в виде объекта Date . Время departureTime будет игнорироваться, если arrivalTime . По умолчанию используется значение now (т. е. текущее время), если не указано значение для departureTime или arrivalTime .
  • modes[] ( необязательный ) — это массив, содержащий один или несколько литералов объекта TransitMode . Это поле может быть включено только в том случае, если запрос включает ключ API. Каждый TransitMode определяет предпочтительный режим транзита. Допускаются следующие значения:
    • BUS указывает, что рассчитанный маршрут должен отдавать предпочтение проезду на автобусе.
    • RAIL указывает, что рассчитанный маршрут должен предпочитаться поездам, трамваям, легкорельсовому транспорту и метро.
    • SUBWAY указывает, что рассчитанный маршрут должен отдавать предпочтение поездке на метро.
    • TRAIN указывает, что расчетный маршрут должен предпочитать движение поездом.
    • TRAM указывает, что рассчитанный маршрут должен отдавать предпочтение трамваям и легкорельсовому транспорту.
  • routingPreference ( необязательный ) указывает предпочтения для транзитных маршрутов. Используя этот параметр, вы можете изменить возвращаемые параметры, а не принимать лучший маршрут по умолчанию, выбранный API. Это поле может быть указано только в том случае, если запрос включает ключ API. Допускаются следующие значения:
    • FEWER_TRANSFERS указывает, что рассчитанный маршрут должен предпочитать ограниченное количество пересадок.
    • LESS_WALKING указывает, что рассчитанный маршрут должен предпочитать ограниченное количество пеших прогулок.

Пример запроса DirectionsRequest на общественном транспорте показан ниже:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Варианты вождения

Вы можете указать параметры маршрутизации для направления движения через объект DrivingOptions .

Объект DrivingOptions содержит следующие поля:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Эти поля описаны ниже:

  • departureTime ( требуется для того, чтобы литерал объекта drivingOptions был допустимым ) указывает желаемое время отправления в виде объекта Date . Значение должно быть установлено на текущее время или какое-то время в будущем. Это не может быть в прошлом. (API преобразует все даты в формат UTC, чтобы обеспечить согласованную обработку в разных часовых поясах.) Для клиентов с планом Premium на платформе Google Maps, если вы включаете в запрос время departureTime , API возвращает лучший маршрут с учетом ожидаемых условий трафика в то время и включает прогнозируемое время в пробке ( duration_in_traffic ) в ответе. Если вы не укажете время отправления (т. е. если запрос не включает drivingOptions ), возвращаемый маршрут в целом является хорошим маршрутом без учета условий движения.
  • trafficModel ( необязательный ) указывает предположения, используемые при расчете времени в пробке. Этот параметр влияет на значение, возвращаемое в поле duration_in_traffic в ответе, которое содержит прогнозируемое время в пробках на основе средних значений за прошлые периоды. По умолчанию bestguess . Допускаются следующие значения:
    • bestguess (по умолчанию) указывает, что возвращаемая duration_in_traffic должна быть наилучшей оценкой времени в пути с учетом того, что известно как о исторических условиях трафика, так и о реальном трафике. Живой трафик становится более важным, чем ближе время departureTime к текущему моменту.
    • pessimistic указывает, что возвращаемое значение duration_in_traffic должно быть больше фактического времени в пути в большинстве дней, хотя в отдельные дни с особенно плохими дорожными условиями это значение может превышаться.
    • optimistic указывает, что возвращаемое значение duration_in_traffic должно быть короче, чем фактическое время в пути в большинстве дней, хотя в отдельные дни с особенно хорошими дорожными условиями может быть меньше, чем это значение.

Ниже приведен пример DirectionsRequest для направления движения:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Системы единиц

По умолчанию направления рассчитываются и отображаются с использованием системы единиц страны или региона происхождения. (Примечание: точки отправления, выраженные с использованием координат широты/долготы, а не адресов, всегда по умолчанию используются в метрических единицах.) Например, маршрут из «Чикаго, Иллинойс» в «Торонто, ОНТ» будет отображать результаты в милях, а обратный маршрут будет отображать результаты. в километрах. Вы можете переопределить эту систему единиц, установив ее явно в запросе, используя одно из следующих значений UnitSystem :

  • UnitSystem.METRIC указывает использование метрической системы. Расстояния показаны в километрах.
  • UnitSystem.IMPERIAL указывает использование имперской (английской) системы. Расстояния показаны в милях.

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

Смещение региона для направлений

Служба маршрутов Google Maps API возвращает результаты адресов, зависящие от домена (региона или страны), из которого вы загрузили загрузчик JavaScript. (Поскольку большинство пользователей загружают https://maps.googleapis.com/ , это устанавливает неявный домен в США.) Если вы загружаете загрузчик из другого поддерживаемого домена, вы получите результаты, зависящие от этого домена. Например, поиск "Сан-Франциско" может возвращать разные результаты для приложений, загружающих https://maps.googleapis.com/ (США), и для приложений, загружающих http://maps.google.es/ (Испания).

Вы также можете настроить службу «Направления» для возврата результатов, смещенных в сторону определенного региона, используя параметр region . Этот параметр принимает код региона, указанный в виде двухсимвольного (нечислового) вложенного тега региона Unicode. В большинстве случаев эти теги сопоставляются непосредственно с двухсимвольными значениями ccTLD («домен верхнего уровня»), такими как, например, «uk» в «co.uk». В некоторых случаях тег region также поддерживает коды ISO-3166-1, которые иногда отличаются от значений ccTLD (например, «GB» для «Великобритании»).

При использовании параметра region :

  • Укажите только одну страну или регион. Множественные значения игнорируются и могут привести к неудачному запросу.
  • Используйте только двухсимвольные вложенные теги региона (формат Unicode CLDR). Все остальные входные данные приведут к ошибкам.

Смещение по регионам поддерживается только для стран и регионов, поддерживающих направления. Ознакомьтесь с информацией о покрытии платформы Google Maps , чтобы узнать о международном покрытии Directions API.

Направления рендеринга

Инициирование запроса направлений к DirectionsService с помощью метода route() требует передачи обратного вызова, который выполняется после завершения запроса службы. Этот обратный вызов вернет DirectionsResult и код DirectionsStatus в ответе.

Статус запроса маршрутов

DirectionsStatus может возвращать следующие значения:

  • OK указывает, что ответ содержит допустимый DirectionsResult .
  • NOT_FOUND указывает, что по крайней мере одно из местоположений, указанных в исходной, конечной или путевых точках запроса, не может быть геокодировано.
  • ZERO_RESULTS указывает, что не удалось найти маршрут между источником и пунктом назначения.
  • MAX_WAYPOINTS_EXCEEDED указывает, что в DirectionsRequest DirectionsWaypoint См. раздел ниже об ограничениях для путевых точек .
  • MAX_ROUTE_LENGTH_EXCEEDED указывает, что запрошенный маршрут слишком длинный и не может быть обработан. Эта ошибка возникает, когда возвращаются более сложные направления. Попробуйте уменьшить количество путевых точек, поворотов или инструкций.
  • INVALID_REQUEST указывает, что предоставленный DirectionsRequest был недействительным. Наиболее распространенными причинами этого кода ошибки являются запросы, в которых отсутствует пункт отправления или назначения, или транзитный запрос, включающий путевые точки.
  • OVER_QUERY_LIMIT указывает, что веб-страница отправила слишком много запросов в течение разрешенного периода времени.
  • REQUEST_DENIED указывает, что веб-странице не разрешено использовать службу маршрутов.
  • UNKNOWN_ERROR указывает, что запрос направления не может быть обработан из-за ошибки сервера. Запрос может быть успешным, если вы попробуете еще раз.

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

Отображение DirectionsResult

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

Чтобы отобразить DirectionsResult с помощью DirectionsRenderer , вам необходимо сделать следующее:

  1. Создайте объект DirectionsRenderer .
  2. Вызовите setMap() в средстве визуализации, чтобы связать его с переданной картой.
  3. Вызовите setDirections() в средстве визуализации, передав ему DirectionsResult , как указано выше. Поскольку средство визуализации является MVCObject , оно автоматически обнаружит любые изменения своих свойств и обновит карту при изменении связанных с ним направлений.

В следующем примере вычисляются направления между двумя местоположениями на маршруте 66, где исходная и конечная точки задаются заданными значениями "start" и "end" в раскрывающихся списках. DirectionsRenderer обрабатывает отображение полилинии между указанными местоположениями и размещением маркеров в исходной точке, пункте назначения и любых путевых точках, если это применимо.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

В теле HTML:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Посмотреть пример

В следующем примере показаны направления с использованием различных видов транспорта между Хейт-Эшбери и Оушен-Бич в Сан-Франциско, Калифорния:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

В теле HTML:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Посмотреть пример

DirectionsRenderer не только обрабатывает отображение полилинии и любых связанных маркеров, но также может обрабатывать текстовое отображение направлений в виде последовательности шагов. Для этого вызовите setPanel() в DirectionsRenderer , передав ему <div> , в котором будет отображаться эта информация. Это также гарантирует, что вы отобразите соответствующую информацию об авторских правах и любые предупреждения, которые могут быть связаны с результатом.

Текстовые указания будут предоставляться с использованием предпочтительных языковых настроек браузера или языка, указанного при загрузке API JavaScript с использованием language параметра. (Дополнительную информацию см. в разделе Локализация. ) В случае маршрутов общественного транспорта время будет отображаться в часовом поясе на этой остановке общественного транспорта.

Следующий пример идентичен приведенному выше, но включает панель <div> для отображения направлений:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

В теле HTML:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

Посмотреть пример

Объект DirectionsResult

При отправке запроса направления в DirectionsService вы получаете ответ, состоящий из кода состояния и результата, который представляет собой объект DirectionsResult . DirectionsResult — это литерал объекта со следующими полями:

  • geocoded_waypoints[] содержит массив объектов DirectionsGeocodedWaypoint , каждый из которых содержит сведения о геокодировании исходной точки, пункта назначения и путевых точек.
  • routes[] содержит массив объектов DirectionsRoute . Каждый маршрут указывает способ добраться от источника до пункта назначения, указанный в DirectionsRequest . Как правило, для любого данного запроса возвращается только один маршрут, если только поле запроса provideRouteAlternatives не установлено в значение true , в котором может быть возвращено несколько маршрутов.

Примечание. Свойство via_waypoint устарело в альтернативных маршрутах. Версия 3.27 — последняя версия API, которая добавляет дополнительные путевые точки на альтернативных маршрутах. Для версий API 3.28 и выше вы можете продолжать реализовывать перетаскиваемые маршруты с помощью сервиса Directions, отключив перетаскивание альтернативных маршрутов. Только основной маршрут должен быть перетаскиваемым. Пользователи могут перетаскивать основной маршрут, пока он не совпадет с альтернативным маршрутом.

Направления Геокодированные путевые точки

DirectionsGeocodedWaypoint содержит подробную информацию о геокодировании исходной точки, пункта назначения и путевых точек.

DirectionsGeocodedWaypoint — это литерал объекта со следующими полями:

  • geocoder_status указывает код состояния, полученный в результате операции геокодирования. Это поле может содержать следующие значения.
    • "OK" означает, что ошибок не возникло; адрес был успешно проанализирован, и был возвращен хотя бы один геокод.
    • "ZERO_RESULTS" ​​означает, что геокодирование прошло успешно, но не дало результатов. Это может произойти, если геокодеру был передан несуществующий address .
  • partial_match указывает, что геокодер не вернул точного соответствия исходному запросу, хотя смог сопоставить часть запрошенного адреса. Вы можете проверить первоначальный запрос на наличие опечаток и/или неполного адреса.

    Частичное совпадение чаще всего происходит для уличных адресов, которые не существуют в населенном пункте, который вы передаете в запросе. Частичные совпадения также могут быть возвращены, когда запрос соответствует двум или более местоположениям в одной и той же местности. Например, «Хиллпар-стрит, Бристоль, Великобритания» вернет частичное совпадение как для улицы Генри, так и для улицы Генриетта. Обратите внимание, что если запрос включает компонент адреса с ошибкой, служба геокодирования может предложить альтернативный адрес. Предложения, вызванные таким образом, также будут помечены как частичное совпадение.

  • place_id — это уникальный идентификатор места, который можно использовать с другими API Google. Например, вы можете использовать place_id с библиотекой Google Places API , чтобы получить информацию о местной компании, такую ​​как номер телефона, часы работы, отзывы пользователей и многое другое. См. обзор идентификатора места .
  • types[] — это массив, указывающий тип возвращаемого результата. Этот массив содержит набор из нуля или более тегов, определяющих тип функции, возвращаемой в результате. Например, геокод «Чикаго» возвращает «населенный пункт», который указывает, что «Чикаго» — это город, а также возвращает «политический», который указывает, что это политическая единица.

Маршруты Маршруты

Примечание . Устаревший объект DirectionsTrip был переименован в DirectionsRoute . Обратите внимание, что маршрут теперь относится ко всему путешествию от начала до конца, а не просто к этапу родительской поездки.

DirectionsRoute содержит один результат из указанного источника и пункта назначения. Этот маршрут может состоять из одного или нескольких этапов (типа DirectionsLeg ) в зависимости от того, были ли указаны какие-либо путевые точки. Кроме того, маршрут также содержит информацию об авторских правах и предупреждения, которые должны отображаться пользователю в дополнение к информации о маршруте.

DirectionsRoute — это литерал объекта со следующими полями:

  • legs[] содержит массив объектов DirectionsLeg , каждый из которых содержит информацию об участке маршрута из двух мест в пределах заданного маршрута. Отдельный этап будет присутствовать для каждой указанной путевой точки или пункта назначения. (Маршрут без путевых точек будет содержать ровно один DirectionsLeg .) Каждый этап состоит из серии DirectionStep s.
  • waypoint_order содержит массив, указывающий порядок любых путевых точек в рассчитанном маршруте. Этот массив может содержать измененный порядок, если DirectionsRequest был передан optimizeWaypoints: true .
  • overview_path содержит массив значений LatLng , представляющих приблизительный (сглаженный) путь результирующих направлений.
  • overview_polyline содержит объект с одной points , содержащий закодированное полилинейное представление маршрута. Эта полилиния является приблизительным (сглаженным) путем результирующих направлений.
  • bounds содержит LatLngBounds , указывающий границы полилинии вдоль данного маршрута.
  • copyrights содержит текст об авторских правах, который будет отображаться для этого маршрута.
  • warnings[] содержит массив предупреждений, которые будут отображаться при показе этих направлений. Если вы не используете предоставленный объект DirectionsRenderer , вы должны сами обрабатывать и отображать эти предупреждения.
  • fare содержит общую стоимость проезда (то есть общую стоимость билетов) на этом маршруте. Это свойство возвращается только для транзитных запросов и только для маршрутов, где информация о тарифах доступна для всех транзитных участков. Информация включает в себя:
    • currency : Код валюты ISO 4217 , указывающий валюту, в которой выражена сумма.
    • value : Общая сумма тарифа в валюте, указанной выше.

Направления Ноги

Примечание . Унаследованный объект DirectionsRoute был переименован в DirectionsLeg .

DirectionsLeg определяет один этап пути от пункта отправления до пункта назначения в расчетном маршруте. Для маршрутов, не содержащих путевых точек, маршрут будет состоять из одного «этапа», но для маршрутов, определяющих одну или несколько путевых точек, маршрут будет состоять из одного или нескольких отрезков, соответствующих конкретным отрезкам пути.

DirectionsLeg — это литерал объекта со следующими полями:

  • steps[] содержит массив объектов DirectionsStep , обозначающих информацию о каждом отдельном шаге отрезка пути.
  • Distance указывает общее distance , пройденное этим отрезком, в виде объекта Distance следующего вида:

    • value указывает расстояние в метрах
    • text содержит строковое представление расстояния, которое по умолчанию отображается в единицах измерения, используемых в исходной точке. (Например, мили будут использоваться для любого пункта отправления в пределах США.) Вы можете переопределить эту систему единиц, специально задав UnitSystem в исходном запросе. Обратите внимание, что независимо от того, какую систему единиц вы используете, поле Distance.value всегда содержит значение, выраженное в distance.value .

    Эти поля могут быть неопределенными, если расстояние неизвестно.

  • duration указывает общую продолжительность этого этапа в виде объекта Duration следующего вида:

    • value указывает продолжительность в секундах.
    • text содержит строковое представление длительности.

    Эти поля могут быть неопределенными, если продолжительность неизвестна.

  • duration_in_traffic указывает общую продолжительность этого этапа с учетом текущих условий трафика. duration_in_traffic возвращается только в том случае, если выполняются все следующие условия:

    • Запрос не включает промежуточные путевые точки. То есть он не включает путевые точки, для которых stopover равно true .
    • Запрос предназначен специально для направления движения — mode установлен на driving .
    • Время departureTime включено в запрос как часть поля drivingOptions .
    • Доступны дорожные условия для запрошенного маршрута.

    duration_in_traffic содержит следующие поля:

    • value указывает продолжительность в секундах.
    • text содержит удобочитаемое представление длительности.
  • arrival_time содержит расчетное время прибытия для этого этапа. Это свойство возвращается только для маршрутов общественного транспорта. Результат возвращается как объект Time с тремя свойствами:
    • value времени, указанное как объект Date JavaScript.
    • text время, указанное в виде строки. Время отображается в часовом поясе транзитной остановки.
    • time_zone содержит часовой пояс этой станции. Значение представляет собой название часового пояса, определенное в базе данных часовых поясов IANA , например, «Америка/Нью-Йорк».
  • departure_time содержит расчетное время отправления для этого этапа, указанное как объект Time . Время departure_time доступно только для маршрутов общественного транспорта.
  • start_location содержит LatLng происхождения этого участка. Поскольку веб-служба Directions вычисляет направления между местоположениями, используя ближайший вариант транспортировки (обычно дорогу) в начальной и конечной точках, start_location может отличаться от предоставленного источника этого участка, если, например, дорога не находится рядом с началом. .
  • end_location содержит LatLng пункта назначения этого участка. Поскольку DirectionsService вычисляет направления между местоположениями, используя ближайший вариант транспортировки (обычно дорогу) в начальной и конечной точках, end_location может отличаться от предоставленного пункта назначения этого этапа, если, например, дорога не находится рядом с пунктом назначения.
  • start_address содержит удобочитаемый адрес (обычно почтовый адрес) начала этого участка.

    Этот контент предназначен для чтения как есть. Не анализируйте программно отформатированный адрес.
  • end_address содержит удобочитаемый адрес (обычно почтовый адрес) конца этой ветви.

    Этот контент предназначен для чтения как есть. Не анализируйте программно отформатированный адрес.

Направления Шаги

DirectionsStep — это наиболее атомарная единица маршрута направления, содержащая один шаг, описывающий конкретную единственную инструкцию в путешествии. Например, «Поверните налево на W. 4th St.» Шаг не только описывает инструкцию, но также содержит информацию о расстоянии и продолжительности, относящуюся к тому, как этот шаг относится к следующему шагу. Например, шаг, обозначенный как «Выезд на I-80 West», может содержать продолжительность «37 миль» и «40 минут», указывая на то, что следующий шаг находится в 37 милях/40 минутах от этого шага.

При использовании службы «Направления» для поиска маршрутов общественного транспорта массив шагов будет включать дополнительную информацию, относящуюся к общественному транспорту, в виде объекта transit . Если маршруты включают несколько видов транспорта, в массиве steps[] будут предоставлены подробные инструкции для пешеходов или водителей. Например, пешеходный шаг будет включать направления от начального и конечного местоположений: «Прогулка до Иннес-авеню и Фитч-стрит». Этот шаг будет включать в себя подробные маршруты ходьбы для этого маршрута в массиве steps[] , например: «Направляйтесь на северо-запад», «Поверните налево на Arelious Walker» и «Поверните налево на Innes Ave».

DirectionsStep — это литерал объекта со следующими полями:

  • instructions содержат инструкции для этого шага в текстовой строке.
  • Distance содержит distance , пройденное этим шагом до следующего шага, как объект Distance . (См. описание в DirectionsLeg выше.) Это поле может быть неопределенным, если расстояние неизвестно.
  • duration содержит оценку времени, необходимого для выполнения шага до следующего шага, как объект Duration . (См. описание в DirectionsLeg выше.) Это поле может быть неопределенным, если продолжительность неизвестна.
  • start_location содержит геокодированную LatLng начальной точки этого шага.
  • end_location содержит LatLng конечной точки этого шага.
  • polyline содержит объект с одной points , который содержит закодированное представление ломаной линии шага. Эта полилиния является приблизительным (сглаженным) путем ступени.
  • steps[] литерал объекта DirectionsStep , который содержит подробные инструкции по пешеходным или автомобильным шагам в направлениях общественного транспорта. Подэтапы доступны только для маршрутов общественного транспорта.
  • travel_mode содержит TravelMode , используемый на этом шаге. Направления общественного транспорта могут включать в себя сочетание пешеходных и транспортных направлений.
  • path содержит массив LatLngs описывающий ход этого шага.
  • transit содержит информацию о транзите, такую ​​как время прибытия и отправления, а также название транзитной линии.

Транзитная информация

Transit directions return additional information that is not relevant for other modes of transportation. These additional properties are exposed through the TransitDetails object, returned as a property of DirectionsStep . From the TransitDetails object you can access additional information for the TransitStop , TransitLine , TransitAgency , and VehicleType objects as described below.

Transit Details

The TransitDetails object exposes the following properties:

  • arrival_stop contains a TransitStop object representing the arrival station/stop with the following properties:
    • name the name of the transit station/stop. eg. "Union Square".
    • location the location of the transit station/stop, represented as a LatLng .
  • departure_stop contains a TransitStop object representing the departure station/stop.
  • arrival_time contains the arrival time, specified as a Time object with three properties:
    • value the time specified as a JavaScript Date object.
    • text the time specified as a string. The time is displayed in the time zone of the transit stop.
    • time_zone contains the time zone of this station. The value is the name of the time zone as defined in the IANA Time Zone Database , eg "America/New_York".
  • departure_time contains the departure time, specified as a Time object.
  • headsign specifies the direction in which to travel on this line, as it is marked on the vehicle or at the departure stop. This will often be the terminus station.
  • headway when available, this specifies the expected number of seconds between departures from the same stop at this time. For example, with a headway value of 600, you would expect a ten minute wait if you should miss your bus.
  • line contains a TransitLine object literal that contains information about the transit line used in this step. The TransitLine provides the name and operator of the line, along with other properties described in the TransitLine reference documentation.
  • num_stops contains the number of stops in this step. Includes the arrival stop, but not the departure stop. For example, if your directions involve leaving from Stop A, passing through stops B and C, and arriving at stop D, num_stops will return 3.

Transit Line

The TransitLine object exposes the following properties:

  • name contains the full name of this transit line. eg. "7 Avenue Express" or "14th St Crosstown".
  • short_name contains the short name of this transit line. This will normally be a line number, such as "2" or "M14".
  • agencies is an array containing a single TransitAgency object. The TransitAgency object provides information about the operator of this line, including the following properties:
    • name contains the name of the transit agency.
    • phone contains the phone number of the transit agency.
    • url contains the URL for the transit agency.

    Note : If you are rendering transit directions manually instead of using the DirectionsRenderer object, you must display the names and URLs of the transit agencies servicing the trip results.

  • url contains a URL for this transit line as provided by the transit agency.
  • icon contains a URL for the icon associated with this line. Most cities will use generic icons that vary by the type of vehicle. Some transit lines, such as the New York subway system, have icons specific to that line.
  • color contains the color commonly used in signage for this transit. The color will be specified as a hex string such as: #FF0033.
  • text_color contains the color of text commonly used for signage of this line. The color will be specified as a hex string.
  • vehicle contains a Vehicle object that includes the following properties:
    • name contains the name of the vehicle on this line. eg. "Subway."
    • type contains the type of vehicle used on this line. See the Vehicle Type documentation for a complete list of supported values.
    • icon contains a URL for the icon commonly associated with this vehicle type.
    • local_icon contains the URL for the icon associated with this vehicle type, based on the local transport signage.

Vehicle Type

The VehicleType object exposes the following properties:

Value Definition
VehicleType.RAIL Rail.
VehicleType.METRO_RAIL Light rail transit.
VehicleType.SUBWAY Underground light rail.
VehicleType.TRAM Above ground light rail.
VehicleType.MONORAIL Monorail.
VehicleType.HEAVY_RAIL Heavy rail.
VehicleType.COMMUTER_TRAIN Commuter rail.
VehicleType.HIGH_SPEED_TRAIN High speed train.
VehicleType.BUS Bus.
VehicleType.INTERCITY_BUS Intercity bus.
VehicleType.TROLLEYBUS Trolleybus.
VehicleType.SHARE_TAXI Share taxi is a kind of bus with the ability to drop off and pick up passengers anywhere on its route.
VehicleType.FERRY Ferry.
VehicleType.CABLE_CAR A vehicle that operates on a cable, usually on the ground. Aerial cable cars may be of the type VehicleType.GONDOLA_LIFT .
VehicleType.GONDOLA_LIFT An aerial cable car.
VehicleType.FUNICULAR A vehicle that is pulled up a steep incline by a cable. A Funicular typically consists of two cars, with each car acting as a counterweight for the other.
VehicleType.OTHER All other vehicles will return this type.

Inspecting DirectionsResults

The DirectionsResults components — DirectionsRoute , DirectionsLeg , DirectionsStep and TransitDetails — may be inspected and used when parsing any directions response.

Important : If you are rendering transit directions manually instead of using the DirectionsRenderer object, you must display the names and URLs of the transit agencies servicing the trip results.

The following example plots walking directions to certain tourist attractions in New York City. We inspect the route's DirectionsStep to add markers for each step, and attach information to an InfoWindow with instructional text for that step.

Note : Since we are calculating walking directions, we also display any warnings to the user in a separate <div> panel.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

In the HTML body:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Посмотреть пример

Using Waypoints in Routes

As noted within the DirectionsRequest , you may also specify waypoints (of type DirectionsWaypoint ) when calculating routes using the Directions service for walking, bicycling or driving directions. Waypoints are not available for transit directions. Waypoints allow you to calculate routes through additional locations, in which case the returned route passes through the given waypoints.

A waypoint consists of the following fields:

  • location (required) specifies the address of the waypoint.
  • stopover (optional) indicates whether this waypoint is a actual stop on the route ( true ) or instead only a preference to route through the indicated location ( false ). Stopovers are true by default.

By default, the Directions service calculates a route through the provided waypoints in their given order. Optionally, you may pass optimizeWaypoints: true within the DirectionsRequest to allow the Directions service to optimize the provided route by rearranging the waypoints in a more efficient order. (This optimization is an application of the traveling salesperson problem .) Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account when deciding which route is the most efficient. All waypoints must be stopovers for the Directions service to optimize their route.

If you instruct the Directions service to optimize the order of its waypoints, their order will be returned in the waypoint_order field within the DirectionsResult object.

The following example calculates cross-country routes across the United States using a variety of start points, end points, and waypoints. (To select multiple waypoints, press Ctrl-Click when selecting items within the list.) Note that we inspect the routes.start_address and routes.end_address to provide us with the text for each route's start and end point.

Машинопись

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

Limits and Restrictions for Waypoints

The following usage limits and restrictions apply:

  • The maximum number of waypoints allowed when using the Directions service in the Maps JavaScript API is 25, plus the origin and destination. The limits are the same for the Directions API web service .
  • For the Directions API web service , customers are allowed 25 waypoints, plus the origin, and destination.
  • Google Maps Platform Premium Plan customers are allowed 25 waypoints, plus the origin, and destination.
  • Waypoints are not supported for transit directions.

Draggable Directions

Users may modify cycling, walking or driving directions displayed using a DirectionsRenderer dynamically if they are draggable , allowing a user to select and alter routes by clicking and dragging the resulting paths on the map. You indicate whether a renderer's display allows draggable directions by setting its draggable property to true . Transit directions cannot be made draggable.

When directions are draggable, a user may select any point on the path (or waypoint) of the rendered result and move the indicated component to a new location. The DirectionsRenderer will dynamically update to show the modified path. Upon release, a transitional waypoint will be added to the map (indicated by a small white marker). Selecting and moving a path segment will alter that leg of the route, while selecting and moving a waypoint marker (including start and end points) will alter the legs of the route passing through that waypoint.

Because draggable directions are modified and rendered client-side, you may wish to monitor and handle the directions_changed event on the DirectionsRenderer to be notified when the user has modified the displayed directions.

The following code shows a trip from Perth on the west coast of Australia to Sydney on the east coast. The code monitors the directions_changed event to update the total distance of all legs of the journey.

Машинопись

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
Посмотреть пример

Попробуйте образец