Сервис Directions

Разработчики Европейской экономической зоны (ЕЭЗ)
Примечание: Серверные библиотеки

Обзор

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

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

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

Начиная

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

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

  1. Перейдите в консоль Google Cloud .
  2. Нажмите кнопку Выбрать проект , затем выберите тот же проект, который вы настроили для Maps JavaScript API, и нажмите Открыть .
  3. В списке API на панели инструментов найдите Directions API (Legacy) .
  4. Если вы видите API в списке, все готово. Если API не указан, включите его на https://console.cloud.google.com/apis/library/directions-backend.googleapis.com

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

Ценообразование

Информацию о ценообразовании и политике использования службы JavaScript Directions см. в разделе Использование и выставление счетов для API Directions (устаревшая версия).

Политики

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

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

Доступ к службе Directions осуществляется асинхронно, поскольку API Google Maps необходимо выполнить вызов внешнего сервера. По этой причине вам необходимо передать метод обратного вызова для выполнения по завершении запроса. Этот метод обратного вызова должен обрабатывать результат(ы). Обратите внимание, что служба 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 (например, "Chicago, IL"), как значение LatLng или как объект Place . Если вы используете объект Place , вы можете указать идентификатор места , строку запроса или местоположение LatLng . Вы можете получить идентификаторы мест из служб Geocoding, Place Search и Place Autocomplete в Maps JavaScript API. Пример использования идентификаторов мест из Place Autocomplete см. в Place Autocomplete и Directions .
  • destination ( обязательно ) указывает конечное местоположение, до которого нужно рассчитать направление. Параметры такие же, как для поля origin описанного выше.
  • travelMode ( обязательно ) указывает, какой вид транспорта использовать при расчете направлений. Допустимые значения указаны в разделе Режимы движения ниже.
  • transitOptions ( необязательно ) указывает значения, которые применяются только к запросам, где travelMode — TRANSIT . Допустимые значения описаны в разделе Transit Options ниже.
  • drivingOptions ( необязательно ) указывает значения, которые применяются только к запросам, где travelMode — DRIVING . Допустимые значения описаны в разделе Driving Options ниже.

  • unitSystem ( необязательно ) указывает, какую систему единиц использовать при отображении результатов. Допустимые значения указаны в разделе Системы единиц ниже.

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

    • 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 Platform Coverage Details , чтобы определить, в какой степени страна поддерживает направления. Если вы запрашиваете направления для региона, в котором этот тип направления недоступен, ответ вернет 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 Platform Premium Plan, если вы включаете 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 Directions возвращает результаты адресов, на которые влияет домен (регион или страна), из которого вы загрузили JavaScript bootstrap. (Поскольку большинство пользователей загружают https://maps.googleapis.com/ , это устанавливает неявный домен для Соединенных Штатов.) Если вы загружаете bootstrap из другого поддерживаемого домена, вы получите результаты, на которые влияет этот домен. Например, поиск по запросу "San Francisco" может возвращать разные результаты из приложений, загружающих https://maps.googleapis.com/ (США), чем из приложений, загружающих http://maps.google.es/ (Испания).

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

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

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

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

Инструкции по визуализации

Инициирование запроса маршрутов к 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 , он автоматически обнаружит любые изменения своих свойств и обновит карту, когда изменятся связанные с ним направления.

В следующем примере вычисляются направления между двумя точками на Route 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 указывает, что геокодер не вернул точное совпадение для исходного запроса, хотя он смог сопоставить часть запрошенного адреса. Вы можете проверить исходный запрос на наличие опечаток и/или неполного адреса.

    Частичные совпадения чаще всего возникают для уличных адресов, которые не существуют в населенном пункте, который вы передаете в запросе. Частичные совпадения также могут быть возвращены, когда запрос соответствует двум или более местоположениям в одном и том же населенном пункте. Например, "Hillpar St, Bristol, UK" вернет частичное совпадение как для Henry Street, так и для Henrietta Street. Обратите внимание, что если запрос включает неправильно написанный компонент адреса, служба геокодирования может предложить альтернативный адрес. Предложения, инициированные таким образом, также будут отмечены как частичное совпадение.

  • place_id — уникальный идентификатор места, который можно использовать с другими API Google. Например, вы можете использовать place_id с библиотекой API Google Places, чтобы получить сведения о местном бизнесе, такие как номер телефона, часы работы, отзывы пользователей и многое другое. См. обзор идентификаторов мест .
  • 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 следующего вида:

    • value указывает расстояние в метрах
    • text содержит строковое представление расстояния, которое по умолчанию отображается в единицах, используемых в исходной точке. (Например, мили будут использоваться для любой исходной точки в пределах Соединенных Штатов.) Вы можете переопределить эту систему единиц, специально установив UnitSystem в исходном запросе. Обратите внимание, что независимо от используемой вами системы единиц, поле 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 времени, указанного в виде объекта JavaScript Date .
    • text время, указанное в виде строки. Время отображается в часовом поясе транзитной остановки.
    • time_zone содержит часовой пояс этой станции. Значение — это название часового пояса, как определено в базе данных часовых поясов IANA , например, "America/New_York".
  • departure_time содержит предполагаемое время отправления для этого этапа, указанное как объект Time . departure_time доступно только для транзитных направлений.
  • start_location содержит LatLng исходной точки этого отрезка. Поскольку Directions Web Service вычисляет направления между локациями, используя ближайший вариант транспортировки (обычно дорогу) в начальной и конечной точках, start_location может отличаться от предоставленной исходной точки этого отрезка, если, например, дорога не находится рядом с исходной точкой.
  • end_location содержит LatLng пункта назначения этого отрезка. Поскольку DirectionsService вычисляет направления между локациями, используя ближайший вариант транспортировки (обычно дорогу) в начальной и конечной точках, end_location может отличаться от предоставленного пункта назначения этого отрезка, если, например, дорога не находится рядом с пунктом назначения.
  • start_address содержит понятный человеку адрес (обычно почтовый адрес) начала этого отрезка.

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

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

Инструкции Шаги

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

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

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 времени, указанного в виде объекта JavaScript Date .
    • text время, указанное в виде строки. Время отображается в часовом поясе транзитной остановки.
    • time_zone содержит часовой пояс этой станции. Значение — это название часового пояса, как определено в базе данных часовых поясов IANA , например, "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 (Legacy) .
  • Для веб -сервиса API DIRECTS (Legacy) клиентам разрешено 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
Посмотреть пример

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