Обзор
Вы можете рассчитать направления (используя различные способы транспортировки) с помощью объекта DirectionsService
. Этот объект взаимодействует со службой маршрутов API Google Maps, которая получает запросы направления и возвращает эффективный путь. Время в пути является основным фактором, который оптимизируется, но могут быть приняты во внимание и другие факторы, такие как расстояние, количество поворотов и многие другие. Вы можете либо обработать результаты этих направлений самостоятельно, либо использовать объект DirectionsRenderer
для визуализации этих результатов.
При указании пункта отправления или назначения в запросе маршрута вы можете указать строку запроса (например, «Чикаго, Иллинойс» или «Дарвин, Новый Южный Уэльс, Австралия»), значение LatLng
или объект Place .
Служба маршрутов может возвращать маршруты, состоящие из нескольких частей, используя серию путевых точек. Направления отображаются в виде ломаной линии, рисующей маршрут на карте, или, кроме того, в виде серии текстовых описаний внутри элемента <div>
(например, «Поверните направо на съезд Вильямсбургского моста»).
Начиная
Прежде чем использовать службу Directions в Maps JavaScript API, сначала убедитесь, что Directions API включен в Google Cloud Console в том же проекте, который вы настроили для Maps JavaScript API.
Чтобы просмотреть список включенных API:
- Перейдите в облачную консоль Google .
- Нажмите кнопку «Выбрать проект» , затем выберите тот же проект, который вы настроили для Maps JavaScript API, и нажмите « Открыть» .
- В списке API на информационной панели найдите Directions API .
- Если вы видите API в списке, все готово. Если API нет в списке, включите его:
- В верхней части страницы выберите ВКЛЮЧИТЬ API , чтобы отобразить вкладку «Библиотека» . Либо в меню слева выберите «Библиотека» .
- Найдите Directions API и выберите его из списка результатов.
- Выберите ВКЛЮЧИТЬ . По завершении процесса 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
, вам необходимо сделать следующее:
- Создайте объект
DirectionsRenderer
. - Вызовите
setMap()
в средстве рендеринга, чтобы привязать его к переданной карте. - Вызовите
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
был переданоптимизацияWaypointsoptimizeWaypoints: 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
время, указанное как объект JavaScriptDate
. -
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;
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;
Ограничения и ограничения на путевые точки
Применяются следующие ограничения и ограничения использования:
- Максимальное количество путевых точек, разрешенных при использовании службы направлений в 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;
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;