Сервис Directions

Обзор

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

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

Служба маршрутов может возвращать маршруты, состоящие из нескольких частей, используя серию путевых точек. Направления отображаются в виде ломаной линии, рисующей маршрут на карте, или, кроме того, в виде серии текстовых описаний внутри элемента <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 Directions, см. раздел «Использование и выставление счетов для Directions API».

Политика

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

Запросы маршрутов

Доступ к службе «Маршруты» является асинхронным, поскольку 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 , служба направлений вернет переупорядоченные 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, чтобы обеспечить единообразную обработку во всех часовых поясах.) Для клиентов плана Премиум платформы 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 указывает использование британской (имперской) системы. Расстояния указаны в милях.

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

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

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

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

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

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

Смещение региона поддерживается только для стран и регионов, поддерживающих направления. Ознакомьтесь с информацией о покрытии платформы Google Maps , чтобы узнать о международном покрытии 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 содержит результат запроса маршрутов, который вы можете обработать самостоятельно или передать объекту 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 и выше вы можете продолжать реализовывать перетаскиваемые маршруты с помощью службы «Направления», отключив перетаскивание альтернативных маршрутов. Только основной маршрут должен быть перетаскиваемым. Пользователи могут перетаскивать основной маршрут, пока он не совпадет с альтернативным маршрутом.

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

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

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

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

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

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

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

Направления Маршруты

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

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

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

  • legs[] содержит массив объектов DirectionsLeg , каждый из которых содержит информацию об участке маршрута из двух мест в пределах данного маршрута. Для каждой указанной путевой точки или пункта назначения будет предусмотрен отдельный участок. (Маршрут без путевых точек будет содержать ровно один DirectionsLeg .) Каждый этап состоит из серии DirectionStep .
  • waypoint_order содержит массив, указывающий порядок любых путевых точек в рассчитанном маршруте. Этот массив может содержать измененный порядок, если DirectionsRequest был переданоптимизацияWaypoints 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 следующей формы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Специальная информация о транзите

Транзитные направления возвращают дополнительную информацию, неактуальную для других видов транспорта. Эти дополнительные свойства предоставляются через объект TransitDetails , возвращаемый как свойство DirectionsStep . Из объекта TransitDetails вы можете получить доступ к дополнительной информации для объектов TransitStop , TransitLine , TransitAgency и VehicleType , как описано ниже.

Детали транзита

Объект TransitDetails раскрывает следующие свойства:

  • arrival_stop содержит объект TransitStop , представляющий станцию ​​прибытия/остановку со следующими свойствами:
    • name название транзитной станции/остановки. например. «Юнион -сквер».
    • location местоположение транзитной станции/остановки, представленное как LatLng .
  • departure_stop содержит объект TransitStop , представляющий станцию ​​вылета/остановку.
  • arrival_time содержит время прибытия, указанное как объект Time с тремя свойствами:
    • value время, указанное как объект Date JavaScript.
    • text время, указанное как строка. Время отображается в часовом поясе транзитной остановки.
    • time_zone содержит часовой пояс этой станции. Значение - это название часового пояса, как определено в базе данных IANA Time Rate , например, «America/New_york».
  • departure_time содержит время отправления, указанное как объект Time .
  • headsign указывает направление, в котором можно перемещаться по этой линии, так как оно отмечено на транспортном средстве или на остановке вылета. Это часто будет станцией термина.
  • headway когда доступно, это указывает на ожидаемое количество секунд между отъездами от той же остановки в это время. Например, со значением headway 600 вы ожидаете ожидания десяти минут, если вам следует пропустить свой автобус.
  • line содержит буквальный объект TransitLine , который содержит информацию о транзитной линии, используемой на этом этапе. TransitLine предоставляет имя и оператор линии, а также другие свойства, описанные в справочной документации TransitLine .
  • num_stops содержит количество остановок на этом шаге. Включает остановку прибытия, но не остановка отъезда. Например, если ваши указания включают в себя уход от остановки A, проходя через остановки B и C и прибытие на остановку D, num_stops вернется 3.

Транзитная линия

Объект TransitLine раскрывает следующие свойства:

  • name содержит полное имя этой транзитной строки. например. "7 Avenue Express" или "14th St Crosstown".
  • short_name содержит короткое имя этой транзитной строки. Обычно это будет номер строки, такой как «2» или «M14».
  • agencies - это массив, содержащий единый объект TransitAgency . Объект TransitAgency предоставляет информацию об операторе этой линии, включая следующие свойства:
    • name содержит название транзитного агентства.
    • phone содержит номер телефона транзитного агентства.
    • url содержит URL для транзитного агентства.

    ПРИМЕЧАНИЕ . Если вы выполняете транзитные направления вручную вместо использования объекта DirectionsRenderer , вы должны отобразить имена и URL -адреса транзитных агентств, обслуживающих результаты поездки.

  • url содержит URL для этой транзитной линии, как это предусмотрено транзитным агентством.
  • icon содержит URL для значка, связанного с этой линией. Большинство городов будут использовать общие значки, которые варьируются в зависимости от типа автомобиля. Некоторые транзитные линии, такие как нью -йоркская система метро, ​​имеют значки, специфичные для этой линии.
  • color содержит цвет, обычно используемый в вывесках для этого транзита. Цвет будет указан как шестигранная строка, такая как: #FF0033.
  • text_color содержит цвет текста, обычно используемый для вывески этой линии. Цвет будет указан как шестнадцатеричная строка.
  • vehicle содержит объект Vehicle , который включает в себя следующие свойства:
    • name содержит название транспортного средства на этой строке. например. "Метро."
    • type содержит тип транспортного средства, используемого на этой линии. См. Документацию типа транспортного средства для полного списка поддерживаемых значений.
    • icon содержит URL для значка, обычно связанного с этим типом транспортного средства.
    • local_icon содержит URL для значка, связанного с этим типом транспортного средства, на основе локальной транспортной вывески.

Тип транспортного средства

Объект VehicleType раскрывает следующие свойства:

Ценить Определение
VehicleType.RAIL Железнодорожный
VehicleType.METRO_RAIL Легкорель -транзит.
VehicleType.SUBWAY Подземный легкоругольник.
VehicleType.TRAM Над наземным легкоругольником.
VehicleType.MONORAIL Монорельса.
VehicleType.HEAVY_RAIL Тяжелый рельс.
VehicleType.COMMUTER_TRAIN Пригородная железная дорога.
VehicleType.HIGH_SPEED_TRAIN Высокоскоростный поезд.
VehicleType.BUS Автобус.
VehicleType.INTERCITY_BUS Межгоговый автобус.
VehicleType.TROLLEYBUS Троллейбус.
VehicleType.SHARE_TAXI Доля такси - это своего рода автобус с возможностью бросить и забрать пассажиров в любом месте на своем маршруте.
VehicleType.FERRY Перевозить.
VehicleType.CABLE_CAR Автомобиль, который работает на кабеле, обычно на земле. Воздушные канатные дорожки могут быть типа VehicleType.GONDOLA_LIFT .
VehicleType.GONDOLA_LIFT Воздушная канатная машина.
VehicleType.FUNICULAR Автомобиль, который подтягивается крутым наклоном кабелем. Фуникуляр, как правило, состоит из двух автомобилей, каждый автомобиль выступает в качестве противовес для другой.
VehicleType.OTHER Все остальные транспортные средства вернут этот тип.

Проверка направлений

Компоненты DirectionsResults - DirectionsRoute , DirectionsLeg , DirectionsStep и TransitDetails - могут быть проверены и используются при анализе любых направлений.

Важно : если вы выполняете транзитные направления вручную вместо использования объекта DirectionsRenderer , вы должны отобразить имена и URL -адреса транзитных агентств, обслуживающих результаты поездки.

В следующем примере указываются направления к определенным туристическим достопримечательностям в Нью -Йорке. Мы осматриваем DirectionsStep маршрута, чтобы добавить маркеры для каждого шага и прикрепляем информацию к InfoWindow с учебным текстом для этого шага.

Примечание . Поскольку мы рассчитываем направления ходьбы, мы также отображаем любые предупреждения пользователю на отдельной панели <div> . 

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);
  });
}

В HTML -теле: 

<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>

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

Использование путевых точек в маршрутах

Как отмечено в направлениях , вы также можете указать путевые точки (из Type DirectionsWaypoint ) при расчете маршрутов, используя службу направлений для ходьбы, велосипедных или вождения. Путевые точки недоступны для транзитных направлений. Путевые точки позволяют вам рассчитывать маршруты через дополнительные местоположения, и в этом случае возвращенный маршрут проходит через заданные пути.

waypoint состоит из следующих полей:

  • location (требуется) Указывает адрес путевой точки.
  • stopover (необязательно) указывает, является ли эта путевая точка фактической остановкой на маршруте ( true ) или вместо этого только предпочтением маршрута через указанное местоположение ( false ). Остановки true по умолчанию.

По умолчанию служба направлений рассчитывает маршрут через предоставленные путевые точки в их данном порядке. Необязательно, вы можете передать optimizeWaypoints: true в DirectionsRequest , чтобы позволить службе направлений оптимизировать предоставленный маршрут путем перестройки путевых точек в более эффективном порядке. (Эта оптимизация является применением проблемы с продавцом .) Время в пути является основным фактором, который оптимизирован, но другие факторы, такие как расстояние, количество поворотов и многое другое, могут быть приняты во внимание при принятии решения о том, какой маршрут является наиболее эффективным. Все путевые точки должны быть остановки для службы направлений, чтобы оптимизировать их маршрут.

Если вы инструктируете службу направлений для оптимизации порядка своих путевых точек, их порядок будет возвращен в поле waypoint_order в объекте DirectionsResult .

В следующем примере вычисляются межстрановые маршруты в Соединенных Штатах, используя различные начальные точки, конечные точки и путевые точки. (Чтобы выбрать несколько точек пути, нажмите Ctrl-Click при выборе элементов в списке.) Обратите внимание, что мы осматриваем routes.start_address и routes.end_address , чтобы предоставить нам текст для начала и конечной точки каждого маршрута.

Машинопись 

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;
index.ts

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;
index.js

Ограничения и ограничения на путевые точки

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

  • Максимальное количество путевых точек, разрешенных при использовании службы направлений в API Maps JavaScript, составляет 25, плюс происхождение и пункт назначения. Пределы одинаковы для веб -службы API направлений .
  • Для указаний API Web Service клиентам разрешено 25 путевых точек, а также происхождение и пункт назначения.
  • Google Maps Platform Platform Plamum Plan клиентам разрешено 25 путевых точек, плюс происхождение и пункт назначения.
  • Путевые точки не поддерживаются для транзитных направлений.

Перетаскиваемые направления

Пользователи могут модифицировать динамические направления езды на велосипеде, ходьбы или вождения, отображаемые с использованием DirectionsRenderer , если они перетаскиваются , что позволяет пользователю выбирать и изменять маршруты, щелкнув и перетаскивая полученные пути на карте. Вы указываете, разрешает ли дисплей рендерера, устанавливая его свойства draggable на true . Транзитные направления не могут быть затягиваемыми.

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

Поскольку перетаскиваемые направления изменены и отображаются на стороне клиента, вы можете отслеживать и обрабатывать событие directions_changed в DirectionsRenderer , которые будут уведомлены, когда пользователь изменил отображаемые указания.

Следующий код показывает поездку из Перта на западном побережье Австралии в Сидней на восточном побережье. Код отслеживает событие directions_changed , чтобы обновить общее расстояние от всех ног путешествия.

Машинопись 

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;
index.ts

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;
index.js
Посмотреть пример

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