Usługa wyznaczania trasy

Omówienie

Możesz wyznaczyć trasę (za pomocą różnych metod transportu publicznego) za pomocą DirectionsService obiektu. Ten obiekt komunikuje się z wytycznymi interfejsu API Map Google Usługa, która odbiera żądania wskazówek dojazdu i zwraca wydajną ścieżkę. Czas podróży to główny czynnik, który jest optymalizowany, lecz inne czynniki takie jak odległość, liczba skrętów i wiele innych. Możesz zrobić to samodzielnie lub skorzystać DirectionsRenderer obiekt do renderowania wyników.

Podczas określania punktu początkowego lub docelowego w żądaniu wskazówek dojazdu: możesz podać ciąg zapytania (na przykład „Gdańsk, Izrael” lub „Darwin, NSW, Australia”), wartość LatLng lub Place (miejsce).

Usługa wskazówek dojazdu może zwrócić wieloczęściowe wskazówki dojazdu za pomocą serii punkty pośrednie. Trasa dojazdu jest wyświetlana w postaci linii łamanej trasy na mapie lub dodatkowo w postaci opis w elemencie <div> (np. „Skręć w prawo na rampę przez most Williamsburga”).

Pierwsze kroki

Zanim użyjesz usługi Trasa dojazdu w interfejsie Maps JavaScript API, upewnij się, interfejs Directions API jest włączony w konsoli Google Cloud, projektu skonfigurowanego na potrzeby Maps JavaScript API.

Aby wyświetlić listę włączonych interfejsów API:

  1. Przejdź do Konsola Google Cloud.
  2. Kliknij przycisk Wybierz projekt. i wybierz ten sam projekt skonfigurowany na potrzeby Maps JavaScript API i kliknij Otwórz.
  3. Na liście interfejsów API w panelu znajdź Directions API
  4. Jeśli interfejs API jest widoczny na liście, nie musisz nic robić. Jeśli interfejsu API nie ma na liście, włącz:
    1. U góry strony wybierz WŁĄCZ API, aby wyświetlić Biblioteka. Możesz też w menu po lewej stronie wybierz opcję Biblioteka.
    2. Wyszukaj Directions API, a potem wybierz go w listę wyników.
    3. Kliknij WŁĄCZ. Gdy proces się zakończy, Directions API pojawi się na liście interfejsów API Panel.

Ceny i zasady

Ceny

16 lipca 2018 r. zaczęliśmy wprowadzać nowy abonament z płatnością według wykorzystania w Mapach, trasach i miejscach. Więcej informacji o nowych cenach i limity użytkowania usługi JavaScript Directions znajdziesz Korzystanie i rozliczenia dla Directions API.

Zasady

Korzystanie z usługi wskazówek dojazdu musi odbywać się zgodnie z opisanych zasad dla interfejsu Directions API.

Prośby o wskazówki dojazdu

Dostęp do usługi Directions jest asynchroniczny, ponieważ interfejs API Map Google musi wywoływać metodę serwera. Dlatego musisz przekazać callback do wykonania po zakończeniu żądania. Ten metoda wywołania zwrotnego powinna przetworzyć wyniki. Pamiętaj, że parametr Usługa wskazówek dojazdu może zwrócić więcej niż jeden możliwy plan podróży jako tablicę osobnych elementów routes[].

Aby użyć wskazówek dojazdu w Maps JavaScript API, utwórz obiekt wpisz DirectionsService i zadzwoń DirectionsService.route(), aby wysłać prośbę. do usługi Trasa dojazdu, przesyłając DirectionsRequest literał obiektu zawierający hasła wejściowe i metodę wywołania zwrotnego do wykonania po otrzymaniu odpowiedzi.

Literał obiektu DirectionsRequest zawiera tych pól:

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

Poniżej objaśniono te pola:

  • origin (wymagany) określa lokalizację początkową od aby wyznaczyć trasę dojazdu. Wartość tę można określić jako String (np. „Warszawa, mazowieckie”), jako LatLng lub jako obiekt Place. Jeśli używasz tagu Place, możesz określić identyfikator miejsca, ciąg zapytania lub LatLng lokalizacja. Identyfikatory miejsc można pobrać z sekcji Geocoding, Usługi wyszukiwania miejsc i autouzupełniania miejsc Maps JavaScript API. Przykład użycia identyfikatorów miejsc z usługi Place Autouzupełnianie, patrz Miejsce Autouzupełnianie i wskazówki dojazdu
  • destination (wymagany) określa lokalizację końcową do którego należy wyznaczyć trasę. Opcje są takie same jak w przypadku origin opisane powyżej.
  • travelMode (wymagany) określa, co środek transportu używany przy obliczaniu trasy dojazdu. Prawidłowa wartości podano w trybach podróży. poniżej.
  • transitOptions (opcjonalny) określa wartości, które mają zastosowanie tylko do żądań, w których travelMode to TRANSIT. Opisujemy prawidłowe wartości w sekcji Opcje transportu publicznego poniżej.
  • drivingOptions (opcjonalny) określa wartości, które mają zastosowanie tylko do żądań, w których travelMode to DRIVING. Opisujemy prawidłowe wartości w sekcji Opcje jazdy poniżej.

  • unitSystem (opcjonalny) określa, co systemu jednostek, który ma być używany przy wyświetlaniu wyników. Prawidłowe wartości to określone w sekcji Systemy jednostek poniżej.

  • waypoints[] (opcjonalny) określa tablicę DirectionsWaypoint s. Zmiana punktów pośrednich trasy, wyznaczając ją przez określone lokalizacje. Punkt pośredni jest określony jako literał obiektu z polami poniżej:

    • location określa lokalizację punkt pośredni, jako obiekt LatLng, jako Place lub jako obiekt String, która zostanie kodowana geograficznie.
    • stopover to wartość logiczna, która wskazuje, że punkt pośredni jest przystankiem na trasie, który ma efekt podziału trasy na dwie trasy.

    (Więcej informacji o punktach pośrednich znajdziesz w sekcji Korzystanie z funkcji Punkty pośrednie na trasach poniżej).

  • optimizeWaypoints (opcjonalny) określa, że trasa przy użyciu dostarczonego komponentu waypoints może być zoptymalizowane przez zmianę kolejności punktów na trasie w bardziej wydajny sposób. Jeśli true, usługa wskazówek dojazdu zwróci zmienioną kolejność waypoints w polu waypoint_order.(Aby dowiedzieć się więcej więcej informacji znajdziesz w sekcji Korzystanie z punktów pośrednich w trasach below.)
  • provideRouteAlternatives (opcjonalny), gdy jest ustawiony do true określa, że usługa Trasa dojazdu może podać w odpowiedzi więcej niż jedną alternatywną trasę. Pamiętaj, że podanie alternatywnych tras może wydłużyć czas odpowiedzi serwera. Ta opcja jest dostępna tylko w przypadku żądań bez pośrednich punktów pośrednich.
  • avoidFerries (opcjonalny), gdy jest ustawiona na true oznacza, że obliczone trasy powinny w miarę możliwości unikaj promów.
  • avoidHighways (opcjonalny), gdy jest ustawiona na true oznacza, że obliczone trasy powinny unikaj dużych autostrad.
  • avoidTolls (opcjonalny), gdy jest ustawiona na true oznacza, że obliczone trasy powinny unikaj dróg płatnych.
  • region (opcjonalny) określa kod regionu określony jako ccTLD („domena najwyższego poziomu”) dwuznakową. (Więcej informacji: Promowanie według regionu poniżej).
.

Poniżej znajduje się przykładowy 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
}

Środki transportu

Przy wyznaczaniu trasy musisz podać którego środka transportu wybrać. Ta podróż obsługiwane tryby:

  • DRIVING (wartość domyślna) wskazuje standardowe wskazówki dojazdu za pomocą sieci drogowej.
  • BICYCLING żądanie jazdy rowerem trasy rowerowe i z preferowanych ulic.
  • TRANSIT prosi o trasę przez: tras dojazdu transportem publicznym.
  • WALKING prosi o trasę pieszą ścieżkami pieszymi i chodników.

Zapoznaj się ze szczegółowymi informacjami o zasięgu Google Maps Platform. aby określić, w jakim stopniu wskazówki dojazdu są obsługiwane w danym kraju. Jeśli poprosisz o wskazówki dojazdu do regionu, w którym dany typ kierunku nie jest dostępny, odpowiedź zwróci DirectionsStatus=„ZERO_RESULTS”.

Uwaga: trasa piesza może nie być zrozumiała. ścieżek dla pieszych, tak więc wskazówki piesze będą zwracać ostrzeżenia DirectionsResult Te ostrzeżenia muszą być zawsze wyświetlane użytkownika. Jeśli nie używasz domyślnego elementu DirectionsRenderer, są odpowiedzialne za wyświetlanie ostrzeżeń.

Opcje transportu publicznego

Opcje zapytań o trasę dojazdu różnią się w zależności od środka transportu. Przy pobieraniu wskazówek dojazdu transportem publicznym urządzenie avoidHighways, avoidTolls, waypoints[] i Zignorowane zostaną: optimizeWaypoints. Możesz określić opcje tras dla transportu publicznego TransitOptions. literał obiektu.

Wskazówki dojazdu transportem publicznym są ważne z uwagi na czas. Wskazówki dojazdu będą zwracane tylko w przypadku w przyszłości.

Literał obiektu TransitOptions zawiera te elementy pola:

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

Poniżej objaśniono te pola:

  • arrivalTime (opcjonalny) określa oczekiwaną wartość. czas przybycia jako obiekt Date. Jeśli godzina przyjazdu to czas odjazdu zostanie zignorowany.
  • departureTime (opcjonalny) określa oczekiwaną wartość. godzina odjazdu jako obiekt Date. Wartość departureTime zostanie zignorowana, jeśli arrivalTime jest określony. Jeśli żadna wartość nie jest ustawiona, przyjmuje wartość domyślną „bieżący czas”, czyli bieżący czas określono dla departureTime albo arrivalTime
  • modes[] (opcjonalny) to tablica zawierająca jeden lub więcej literałów obiektów TransitMode. To pole może zawierać tylko jest dołączany, jeśli żądanie zawiera klucz interfejsu API. Co TransitMode określa preferowany środek transportu. Następujące wartości są dozwolone:
    • BUS oznacza, że wybrana trasa powinna preferować podróż autobusem.
    • RAIL oznacza, że wybrana trasa powinna preferować podróż pociągiem, tramwajem, tramwajem metrem.
    • SUBWAY oznacza, że wybrana trasa powinna preferować podróż metrem.
    • TRAIN oznacza, że wybrana trasa powinna preferować podróż pociągiem.
    • TRAM oznacza, że wybraną trasą powinno być podróżowanie tramwajem i tramwajem.
  • routingPreference (opcjonalny) określa preferencje dla tras transportu publicznego. Korzystając z tej opcji, można zniekształcać wyświetlane opcje, zamiast akceptować domyślną najlepszą trasę wybraną przez interfejs API. To pole można określić tylko wtedy, gdy żądanie zawiera klucz interfejsu API. Następujące wartości są dozwolone:
    • FEWER_TRANSFERS wskazuje, że wyliczona trasa powinna preferować ograniczoną liczbę transfery danych.
    • LESS_WALKING wskazuje, że wyliczona trasa powinna preferować ograniczone ilości spacer.

Poniżej znajduje się przykładowy transport publiczny (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
}

Opcje jazdy

Możesz określić opcje trasy dla wskazówek dojazdu DrivingOptions obiektu.

Obiekt DrivingOptions zawiera te pola:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Poniżej objaśniono te pola:

  • departureTime (wymagany w przypadku drivingOptions literał obiektu jako prawidłowy) określa żądany czas odjazdu jako obiekt Date. Wartość musi być jest ustawiona na aktualną godzinę lub czas w przyszłości. Nie może znajdować się w sekcji w przeszłości. (API konwertuje wszystkie daty na UTC, aby zapewnić spójną obsługę w różnych strefach czasowych). W przypadku klientów korzystających z abonamentu premium na Google Maps Platform: umieszcza w żądaniu parametr departureTime, najlepszą trasę przy oczekiwanych w danym momencie warunkach na drodze; obejmuje przewidywany czas ruchu (duration_in_traffic) w odpowiedzi. Jeśli nie określisz godziny odjazdu (tzn. jeśli żądanie nie obejmuje: drivingOptions), zwrócona trasa to zwykle dobra trasa, nie biorąc pod uwagę warunków drogowych.
  • trafficModel (opcjonalny) określa założenia do używać do obliczania czasu w ruchu. To ustawienie wpływa na wartość zwracanych w polu duration_in_traffic w odpowiedzi, który zawiera przewidywany czas ruchu na podstawie średnich wartości historycznych. Domyślna wartość to bestguess. Następujące wartości są dozwolone:
    • bestguess (domyślnie) wskazuje, że zwrócona wartość duration_in_traffic to najbardziej optymalna przybliżona długość podróży z uwzględnieniem informacji o historycznych warunkach na drodze aktualny ruch w sieci. Aktualne natężenie ruchu staje się ważniejsze im bliżej departureTime do teraz.
    • pessimistic oznacza, że zwrócony Długość linii duration_in_traffic powinna być dłuższa niż faktyczna długość podróży przez większość dni, czasami jednak ruch jest wyjątkowo duży warunki mogą przekroczyć tę wartość.
    • optimistic oznacza, że zwrócony Wartość duration_in_traffic powinna być krótsza od rzeczywistej wartości czas podróży w większość dni, ale czasami są to dni szczególnie dobre warunki na drodze mogą być szybsze niż ta wartość.
.

Oto przykładowy DirectionsRequest wskazówek dojazdu:

{
  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'
  }
}

Systemy jednostek

Domyślnie wskazówki są obliczane i wyświetlane przy użyciu system jednostek kraju lub regionu miejsca wylotu. (Uwaga: źródła wyrażone za pomocą szerokość i długość geograficzna zamiast adresów są zawsze domyślne. na jednostki metryczne). Na przykład trasa z „Warszawa, mazowieckie” do „Toronto, ONT” wyniki będą wyświetlane w milach, a odwrotna trasa wyświetli wyniki w kilometrach. Ty można zastąpić ten system jednostek, jawnie ustawiając go w funkcji poproś o użycie jednego z tych elementów (UnitSystem) wartości:

  • UnitSystem.METRIC określa za pomocą systemu metrycznego. odległości są wyświetlane w kilometrach.
  • UnitSystem.IMPERIAL określa użycie nazwy imperialnej (w języku angielskim). Odległości są podawane w milach.

Uwaga: to ustawienie dotyczy tylko systemu jednostki wpływa na tekst wyświetlany użytkownikowi. Także wynik wyszukiwania wskazówek dojazdu zawiera wartości odległości, niewidoczne dla użytkownika, które zawsze są wyrażony w metrach.

Promowanie wskazówek według regionu

Usługa wyznaczania trasy w interfejsie API Map Google zwraca wyniki dotyczące adresów, których dotyczy problem według domeny (regionu lub kraju), z której został załadowany JavaScript wczytywania. (Ponieważ większość użytkowników wczytuje https://maps.googleapis.com/, spowoduje to ustawienie domeny niejawnej na Stany Zjednoczone). Jeśli wczytasz wczytaj aplikację z innej obsługiwanej domeny, pod wpływem tej domeny. Na przykład wyniki wyszukiwania hasła „Kraków” maj zwracają różne wyniki z wczytywanych aplikacji https://maps.googleapis.com/ (Stany Zjednoczone) niż 1 wczytuję http://maps.google.es/ (Hiszpania).

Możesz również skonfigurować usługę Trasa dojazdu tak, aby wyniki były zniekształcone w wybranym regionie za pomocą parametru region. Ten parametr pobiera kod regionu określony jako dwuznakowy (nienumeryczny) kod Unicode. podtag regionu. W większości przypadków te tagi są mapowane bezpośrednio na domenę ccTLD („najwyższego poziomu”) domena”) dwuznakowych, np. „pl” w ciągu „co.uk”, na przykład. W niektórych tag region obsługuje również kody ISO-3166-1, które czasami różnią się od wartości ccTLD (np. „GB” w przypadku Wielkiej Brytanii).

Gdy używasz parametru region:

  • Określ tylko jeden kraj lub region. Wiele wartości jest ignorowanych, może doprowadzić do nieudanego żądania.
  • Używaj tylko dwuznakowych tagów podrzędnych regionów (w formacie Unicode CLDR). Wszystkie pozostałe spowoduje wystąpienie błędów.

Promowanie ze względu na region jest obsługiwane tylko w przypadku krajów i regionów obsługujących wskazówek dojazdu. Zapoznaj się ze szczegółowymi informacjami o zasięgu Google Maps Platform. aby wyświetlić zasięg interfejsu Directions API w różnych krajach.

Kierunki renderowania

Inicjowanie zapytania o trasę dojazdu do DirectionsService metodą route() wymaga przekazania wywołania zwrotnego, które jest wykonywane po zakończeniu żądania usługi. To wywołanie zwrotne zwróci błąd DirectionsResult i DirectionsStatus w odpowiedzi.

Stan zapytania o trasę dojazdu

DirectionsStatus może zwracać te wartości:

  • OK oznacza, że odpowiedź zawiera prawidłowy: DirectionsResult.
  • NOT_FOUND wskazuje co najmniej jedną z lokalizacje podane w miejscu wylotu, przeznaczenia lub miejscu docelowym nie udało się przetworzyć danych geograficznych dotyczących punktów pośrednich.
  • ZERO_RESULTS oznacza, że nie udało się znaleźć trasy między miejscem wylotu a celem podróży.
  • MAX_WAYPOINTS_EXCEEDED wskazuje również, że uzupełniono wiele pól DirectionsWaypoint w: DirectionsRequest. Zajrzyj do sekcji poniżej limity punktów na trasie.
  • MAX_ROUTE_LENGTH_EXCEEDED wskazuje trasę jest zbyt długi i nie można go przetworzyć. Ten błąd występuje w przypadku bardziej złożonych wskazówek dojazdu. Spróbuj zmniejszyć liczbę punktów na trasie, skrętów, lub instrukcjami.
  • INVALID_REQUEST oznacza, że podany DirectionsRequest jest nieprawidłowy. Najczęstsze przyczyny tego kodu błędu są żądaniami, w których brakuje parametru miejsce wylotu lub przylotu lub informacje o transporcie publicznym obejmujące punkty pośrednie.
  • OVER_QUERY_LIMIT oznacza, że na stronie internetowej wysłał(a) zbyt wiele żądań w dozwolonym czasie.
  • REQUEST_DENIED oznacza, że strona jest nie może korzystać z usługi wskazówek dojazdu.
  • UNKNOWN_ERROR oznacza prośbę o wskazówki dojazdu. nie udało się przetworzyć z powodu błędu serwera. Żądanie może , gdy spróbujesz ponownie.

Musisz się upewnić, że zapytanie o wskazówki dojazdu zwróciło prawidłowe sprawdzając tę wartość przed przetworzeniem wyniku.

Wyświetlanie wyniku wyszukiwania wskazówek dojazdu

DirectionsResult zawiera wynik funkcji zapytania o wskazówki dojazdu, które możesz obsługiwać samodzielnie lub do obiektu DirectionsRenderer, który może automatycznie obsługuje wyświetlanie wyniku na mapie.

Aby wyświetlić element DirectionsResult za pomocą DirectionsRenderer, musisz wykonać :

  1. Utwórz obiekt DirectionsRenderer.
  2. Aby utworzyć powiązanie, wywołaj setMap() w mechanizmie renderowania na przekazywaną mapę.
  3. Wywołaj metodę setDirections() w mechanizmie renderowania. DirectionsResult tak jak widać powyżej. Mechanizm renderowania to MVCObject, ale automatycznie wykryje wszelkie zmiany we właściwościach i aktualizować mapę, gdy powiązane z nią wskazówki dojazdu została zmieniona.

W poniższym przykładzie wyznaczono trasę pomiędzy na trasie 66, gdzie punkt początkowy i docelowy są ustawiane przez podane "start" i "end" wartości z list. DirectionsRenderer obsługuje wyświetlanie linii łamanej między wskazanymi lokalizacji i umiejscowienia znaczników w punkcie początkowym, cel podróży oraz wszelkie punkty pośrednie, jeśli są dostępne.

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

W treści 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>

Zobacz przykład

W poniższym przykładzie wskazówki dojazdu pochodzą z różnych środki transportu z Haight-Ashbury do Ocean Beach San Francisco, Kalifornia:

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

W treści 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>

Zobacz przykład

DirectionsRenderer nie tylko obsługuje wyświetlacz linii łamanej i wszelkich powiązanych znaczników, ale może też obsługiwać poprzez wyświetlanie tekstu wskazówek dojazdu w formie serii kroków. Do zrobienia więc zadzwoń do setPanel() na DirectionsRenderer. Wynik to <div>, w którym mają być wyświetlane te informacje. Dzięki temu będziesz mieć pewność, że na stronach są pokazywane odpowiednie prawa autorskie informacje i ostrzeżenia, które mogą być związane z wynik.

Wskazówki tekstowe zostaną dostarczone za pomocą preferowany język lub język określony podczas wczytanie JavaScriptu interfejsu API za pomocą interfejsu language . (Więcej informacji znajdziesz w artykule Lokalizacja.) W przypadku wskazówek dojazdu transportem publicznym zostanie podany czas w strefie czasowej danego przystanku.

Poniższy przykład jest identyczny z podanym wyżej. ale zawiera panel <div>, w którym wyświetl wskazówki:

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

W treści HTML:

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

Zobacz przykład

Obiekt DirectionsResult

Przy wysyłaniu prośby o wskazówki dojazdu do DirectionsService, otrzymasz odpowiedź zawierającą kodu stanu i wyniku, którym jest DirectionsResult obiektu. DirectionsResult to literał obiektu z tymi polami:

  • geocoded_waypoints[] zawiera tablicę wartości DirectionsGeocodedWaypoint obiekt, każdy zawierający szczegóły na temat geokodowania miejsca wylotu, celu podróży i punktów pośrednich.
  • routes[] zawiera tablicę wartości DirectionsRoute obiektów. Każda trasa wskazuje drogę pojedź z miejsca wylotu do miejsca docelowego podanego w DirectionsRequest Zwykle tylko jedna trasa w przypadku dowolnego żądania jest zwracana, o ile Pole provideRouteAlternatives jest ustawione na true, w której może zostać zwróconych wiele tras.

Uwaga: właściwość via_waypoint została wycofana. w sytuacjach alternatywnych. Wersja 3.27 to ostatnia wersja interfejsu API, która udostępnia dodatkowe funkcje w sytuacjach alternatywnych. W przypadku interfejsu API w wersji 3.28 lub nowszej możesz nadal możliwe do przeciągania trasy, korzystając z usługi Trasa dojazdu, wyłączając przeciąganie tras alternatywnych. Przeciągać można tylko główną trasę. Użytkownicy mogą przeciągać główną trasę, aż znajdzie się na trasą alternatywną.

Geokodowane punkty pośrednie trasy dojazdu

DirectionsGeocodedWaypoint zawiera szczegółowe informacje na temat geokodowania miejsca wylotu, cel podróży i punkty pośrednie.

DirectionsGeocodedWaypoint to literał obiektu z tych polach:

  • geocoder_status wskazuje kod stanu wynikowy z operacji geokodowania. To pole może zawierać następujące wartości.
    • "OK" oznacza, że nie wystąpiły błędy. adres został pomyślnie przeanalizowany i został zwrócony co najmniej jeden kod geograficzny.
    • "ZERO_RESULTS" oznacza, że geokod został poprawnie użyty, ale nie zwrócił żadnych wyników. Może się tak zdarzyć, jeśli geokoder został przekazany do nieistniejącego elementu address.

  • partial_match oznacza, że geokoder nie zwrócił kodu. dokładne dopasowanie do pierwotnego żądania, chociaż udało mu się dopasować część w żądanym adresie. Możesz sprawdzić pierwotną prośbę pod kątem błędów ortograficznych i/lub jest niepełny adres.

    Dopasowania częściowe najczęściej pojawiają się w przypadku adresów, które nie istnieją na obszarze objętym zgłoszeniem. Częściowe dopasowania mogą również zostać zwracany, gdy żądanie pasuje do co najmniej 2 lokalizacji w tej samej miejscowości. Na przykład „Hillpar St, Bristol, UK” zwróci częściowe dopasowanie dla obu Henry Street i Henrietta Street. Pamiętaj, że jeśli żądanie zawiera parametr błędnie zapisany adres, usługa geokodowania może zaproponować alternatywę adresu. Sugestie wywołane w ten sposób zostaną również oznaczone jako częściowe dopasowania.

  • place_idto unikalny identyfikator miejsca, którego można użyć z innymi interfejsami API Google. Na przykład możesz użyć atrybutu place_id za pomocą Miejsc Google API, aby uzyskać szczegółowe informacje o lokalnej firmie, takie jak numer telefonu, godzin otwarcia, opinii użytkowników itp. Zobacz omówienie identyfikatora miejsca.
  • types[] to tablica wskazująca typ wynik. Ta tablica zawiera zestaw zero lub więcej tagów identyfikujących typ cechy zwróconej w wyniku. Na przykład kod geograficzny „Gdańsk” zwraca „locality” który wskazuje, że „Warszawa” to miasto, zwraca także „political” (polityczny) co dowodzi, że jest to podmiot polityczny.

Trasy wskazówek dojazdu

Uwaga: starszy obiekt DirectionsTrip ma Nazwa została zmieniona na DirectionsRoute. Zwróć uwagę, że trasa Chodzi tu o całą podróż od początku do końca, a nie o po prostu danego etapu podróży.

Element DirectionsRoute zawiera jeden wynik z: określonego miejsca wylotu i przylotu. Ta trasa może obejmować co najmniej jeden nogę (typu DirectionsLeg) w zależności od tego, czy określono jakiekolwiek punkty pośrednie. Ponadto trasy zawierają również informacje o prawach autorskich i ostrzeżeniach, które muszą być wyświetlana użytkownikowi razem z informacjami o routingu.

DirectionsRoute to literał obiektu z tych polach:

  • legs[] zawiera tablicę wartości DirectionsLeg obiekt, z których każdy zawiera informacje o danym odcinku trasy, z dwóch lokalizacji, na danej trasie. Każda z nich będzie odrębna określony punkt pośredni lub miejsce docelowe. (Trasa bez punktów pośrednich zawiera dokładnie 1 DirectionsLeg.) Każdy etap składa się serii DirectionStep.
  • waypoint_order zawiera tablicę wskazujący kolejność dowolnych punktów pośrednich w obliczonym . Ta tablica może zawierać zmienioną kolejność, jeśli Zaliczono: DirectionsRequest optimizeWaypoints: true
  • overview_path zawiera tablicę wartości Elementy typu LatLng, które odpowiadają wartości przybliżonej (wygładzonej) w postaci możliwych kierunków.
  • Pole overview_polyline zawiera pojedynczy element points który zawiera zakodowany reprezentacja trasy przez linię łamaną. Ta linia łamana jest przybliżoną (wygładzoną) ścieżką i gotowych kierunków.
  • bounds zawiera LatLngBounds wskazujący granice linii łamanej na danej trasie.
  • copyrights zawiera tekst dotyczący praw autorskich, który ma być wyświetlane dla tej trasy.
  • warnings[] zawiera tablicę ostrzeżeń ma być wyświetlany przy wskazaniu tych wskazówek. Jeśli nie chcesz użyj podanego obiektu DirectionsRenderer, musisz samodzielnie obsługiwać i wyświetlać ostrzeżenia.
  • fare zawiera łączną cenę (czyli łączną cenę, kosztów biletu) na tej trasie. Ta usługa jest zwracana tylko w przypadku transportu publicznego żądań i tylko tras, dla których dostępne są informacje dotyczące cen dla wszystkich części transportu publicznego. Do informacji tych należą:
    • currency: Waluta w formacie ISO 4217 kod wskazujący walutę, w której wyrażona jest kwota.
    • value: łączna kwota opłaty w określonej walucie. powyżej.

Trasa dojazdu – nogi

Uwaga: starszy obiekt DirectionsRoute ma Nazwa została zmieniona na DirectionsLeg.

DirectionsLeg określa jeden etap podróży z punktu początkowego do miejsca docelowego na obliczonej trasie. W przypadku tras, które nie zawierają żadnych punktów pośrednich, trasa składa się z „singiel”, ale dla tras, które definiują jeden lub więcej punktów, trasa będzie się składać z co najmniej jednego odcinka odpowiadającego na konkretnych etapach podróży.

DirectionsLeg to literał obiektu z parametrem tych pól:

  • steps[] zawiera tablicę wartości DirectionsStep obiektów oznaczających informacje o każdy etap podróży.

  • distance oznacza całkowity pokonany dystans przez tę nogę jako obiekt Distance ten formularz:

    • value oznacza odległość w metrach
    • text zawiera ciąg znaków odległości, która jest domyślnie wyświetlana w jednostkach używane w punkcie początkowym. (Na przykład mile będą używane do z dowolnego miejsca pochodzenia w Stanach Zjednoczonych). Możesz to zmienić systemu jednostek, ustawiając UnitSystem w pierwotnym zapytaniu. Pamiętaj, że niezależnie od używanego systemu jednostek Pole distance.value zawsze zawiera wartość wyrażony w metrach.

    Te pola mogą być nieokreślone, jeśli odległość jest nieznana.

  • duration wskazuje łączny czas trwania ten noga, jako obiekt Duration następujący formularz:

    • value wskazuje czas trwania w języku: sek.
    • text zawiera ciąg znaków przez cały okres.

    Jeśli czas trwania jest nieznany, te pola mogą być niezdefiniowane.

  • duration_in_traffic wskazuje łączny czas trwania z uwzględnieniem bieżących warunków na drodze. Wartość duration_in_traffic jest zwracana tylko wtedy, gdy wszystkie te wartości są prawdziwe:

    • Żądanie nie obejmuje punktów pośrednich na trasie. Oznacza to, że nie jest możliwe uwzględniaj punkty pośrednie, gdzie stopover to true.
    • Żądanie dotyczy konkretnie wskazówek dojazdu. mode ma wartość driving.
    • departureTime jest częścią drivingOptions w żądaniu.
    • Informacje o warunkach na drodze są dostępne na wybranej trasie.

    duration_in_traffic zawiera te pola:

    • value wskazuje czas trwania w sekundach.
    • text zawiera reprezentację zrozumiałą dla człowieka przez cały okres.
  • arrival_time zawiera szacowany czas dotarcia na tę nogę. Ta właściwość jest zwracana tylko w przypadku wskazówek dojazdu transportem publicznym. wynik jest zwracany jako obiekt Time z 3 właściwościami:
    • value czas określony w kodzie JavaScript Date obiekt.
    • text czas określony jako ciąg znaków. Godzina to w strefie czasowej przystanku.
    • time_zone zawiera strefę czasową tej stacji. to nazwa strefy czasowej zdefiniowana w Strefa czasowa IANA Baza danych, np. „Ameryka/Nowy_Jork”.
  • departure_time zawiera szacowany czas odjazdu dla ten etap, określony jako obiekt Time. departure_time jest dostępna tylko w przypadku wskazówek dojazdu transportem publicznym.
  • start_location zawiera LatLng wysokości tego odcinka. Ponieważ Usługa internetowa wskazówek dojazdu oblicza trasy między lokalizacjami wybierając najbliższy środek transportu (zwykle drogę) przy punkt początkowy i końcowy, start_location może być różni się od podanego źródła tego odcinka, jeśli dla na przykład droga nie znajduje się w pobliżu punktu początkowego.
  • end_location zawiera LatLng od miejsca docelowego tego etapu. Ponieważ DirectionsService oblicza trasę między lokalizacjami wybierając najbliższy środek transportu (zwykle drogę) na punktu początkowego i końcowego, end_location może być inne niż podane miejsce docelowe tego etapu, jeśli dla oznacza to, że droga nie znajduje się w pobliżu miejsca docelowego.
  • start_address zawiera adres zrozumiały dla człowieka (zwykle jest to adres) początku tego etapu.

    Tę treść należy czytać w takiej postaci, w jakiej jest. Nie analizuj automatycznie parametru sformatowany adres.
  • end_address zawiera adres zrozumiały dla człowieka (zazwyczaj jest to adres) na końcu tego etapu.

    Tę treść należy czytać w takiej postaci, w jakiej jest. Nie analizuj automatycznie parametru sformatowany adres.

Wskazówki dojazdu – kroki

DirectionsStep to najbardziej atomowa jednostka „Trasa dojazdu”, która zawiera pojedynczy etap w danej ścieżce. Na przykład: „Skręć w lewo na W. Ul. Podolska Nie da się tego zrobić, opisuje tylko instrukcję, ale także odległość i czas trwania. informacje powiązane z kolejnym krokiem. Na przykład krok oznaczony jako „Wjedź na autostradę I-80 West”. może zawierać czas trwania „37 mil” i „40 minut”, wskazując, że następny krok od tego kroku dzieli go 40 min.

Podczas korzystania z usługi Trasa dojazdu do wyszukiwania wskazówek dojazdu transportem publicznym, tablica kroków będzie zawierać dodatkowe Transport publiczny określone informacje w formie obiektu transit. Jeśli Wskazówki obejmują różne środki transportu, szczegółowe wskazówki dojazdu będzie podawany w przypadku kroków pieszo lub samochodem w tablicy steps[]. Na przykład krok pieszo będzie zawierał wskazówki od początku do końca lokalizacje: „Idź do Innes Ave & Fitch Street”. Ten krok będzie obejmować szczegółowe wskazówki piesze na tej trasie w okresie: steps[] tablica, na przykład: „Kieruj się na północny zachód”, „Skręć w lewo na Arelious Walker” lub „Skręć w lewo w Innes Ave”.

DirectionsStep to literał obiektu z parametrem tych pól:

  • instructions zawiera instrukcje, jak wykonać ten krok w ciągu tekstowym.
  • distance zawiera pokonany dystans do kolejnego kroku, jako obiekt Distance. (Zobacz opis w DirectionsLeg powyżej). To pole może być niezdefiniowane jeśli odległość jest nieznana.
  • duration zawiera szacowany czas wymagany do wykonując dany krok, aż do kolejnego, jako Duration obiekt. (Zobacz opis w DirectionsLeg above.) To pole może być niezdefiniowane jeśli czas trwania jest nieznany.
  • start_location zawiera kod geograficzny LatLng punktu początkowego tego kroku.
  • end_location zawiera LatLng z na końcu tego kroku.
  • Pole polyline zawiera pojedynczy element points który zawiera zakodowany reprezentacja kroku za pomocą linii łamanej. Ta linia łamana jest przybliżoną (wygładzoną) ścieżką w tym kroku.
  • steps[] literał obiektu DirectionsStep, który zawiera szczegółowe wskazówki dojazdu pieszo lub samochodem w transporcie publicznym wskazówek dojazdu. Etapy podrzędne są dostępne tylko w przypadku wskazówek dojazdu transportem publicznym.
  • travel_mode zawiera wartość TravelMode używaną w ten krok. Wskazówki dojazdu transportem publicznym mogą obejmować trasę pieszą wskazówki dojazdu transportem publicznym.
  • path zawiera tablicę LatLngs opisującą cały proces.
  • transit zawiera informacje dotyczące transportu publicznego, takie jak godziny przyjazdu i odjazdu oraz nazwę linii transportu publicznego.

Informacje o transporcie publicznym

Wskazówki dojazdu transportem publicznym zwracają dodatkowe informacje, które nie są istotne dla inne środki transportu. Te dodatkowe właściwości są widoczne za pośrednictwem obiektu TransitDetails, zwracany jako właściwość DirectionsStep Z obiektu TransitDetails możesz uzyskać dodatkowe informacje na temat: TransitStop, TransitLine, TransitAgency i VehicleType obiektów zgodnie z opisem poniżej.

Szczegóły transportu publicznego

Obiekt TransitDetails ujawnia: właściwości:

  • arrival_stop zawiera TransitStop. obiekt reprezentujący stację przyjazdu/przystanek za pomocą właściwości:
    • name nazwa stacji/przystanku. np. „plac Solny”.
    • location lokalizacja stacji/przystanku, są reprezentowane jako LatLng.
  • departure_stop zawiera TransitStop reprezentujący stację/przystanek.
  • arrival_time zawiera godzinę przyjazdu określoną jako Obiekt Time z 3 właściwościami:
    • value czas określony w kodzie JavaScript Date obiekt.
    • text czas określony jako ciąg znaków. Godzina to w strefie czasowej przystanku.
    • time_zone zawiera strefę czasową tej stacji. to nazwa strefy czasowej zdefiniowana w Strefa czasowa IANA Baza danych, np. „Ameryka/Nowy_Jork”.
  • departure_time zawiera godzinę odjazdu podaną jako Time obiekt.
  • headsign określa kierunek, w którym ma się poruszać tę linię, ponieważ jest oznaczona na pojeździe lub na przystanku początkowym. Często jest to stacja końcowe.
  • headway, jeśli jest dostępna, określa oczekiwaną liczbę kilku sekund między odjazdami z tego samego przystanku w tej chwili. Dla: np. z wartością headway 600, oczekujesz 10 punktów minuta oczekiwania, jeśli spóźnisz się na autobus.
  • line zawiera TransitLine literał obiektu, który zawiera informacje o linii transportu publicznego używaną w ten krok. TransitLine zawiera nazwę i operator wraz z innymi właściwościami opisanymi w tagu TransitLine dokumentacji referencyjnej.
  • num_stops zawiera liczbę przystanków na tym etapie. Obejmuje przystanek na trasie przyjazdu, ale nie uwzględnia przystanku na odjazd. Na przykład, jeśli trasa obejmuje wysiadanie ze przystanku A, przejazd przez przystanki B C, i na przystanku D num_stops wraca 3.

Linia transportu publicznego

Obiekt TransitLine ujawnia te właściwości:

  • name zawiera pełną nazwę tej linii transportu publicznego. np. „Emilii Plater 23” czy „14th St Crosstown”.
  • short_name zawiera krótką nazwę tego transportu publicznego . Zwykle jest to numer wiersza, np. „2”. czy „M14”.
  • agencies to tablica zawierająca jeden element TransitAgency obiekt. Obiekt TransitAgency zawiera informacje o operatorze tego wiersza, w tym tych właściwości:
    • name zawiera nazwę przewoźnika.
    • phone zawiera numer telefonu transportu publicznego agencjami.
    • url zawiera adres URL przewoźnika.

    Uwaga: jeśli renderujesz wskazówki dojazdu transportem publicznym ręcznie. zamiast używać obiektu DirectionsRenderer, musisz zawierać nazwy i adresy URL przewoźników obsługujących przejazd; wyników.

  • url zawiera adres URL tej linii transportu publicznego podany przez przewoźnikiem.
  • icon zawiera adres URL ikony powiązanej z tym wierszem. Większość miast używa ogólnych ikon, które różnią się w zależności od typu pojazdu. Niektóre linie transportu publicznego, takie jak nowojorskie metro, mają ikony tę linię.
  • color zawiera kolor, który jest często używany na szyldach i oznaczeniach transportem publicznym. Kolor zostanie określony w postaci ciągu szesnastkowego, np. #FF0033.
  • text_color zawiera kolor tekstu często używany w oznaczenia tej linii. Kolor zostanie określony w postaci ciągu szesnastkowego.
  • vehicle zawiera obiekt Vehicle, który zawiera te właściwości:
    • name zawiera nazwę pojazdu na tej linii. np. „Metro”.
    • type zawiera typ pojazdu używanego na tej linii. Zapoznaj się z dokumentacją typu pojazdu, aby uzyskać informacje na temat pełną listę obsługiwanych wartości.
    • icon zawiera URL często powiązanej ikony z pojazdem tego typu.
    • local_icon zawiera adres URL powiązanej ikony z informacjami o lokalnym znaku transportowym.

Typ pojazdu

Obiekt VehicleType ujawnia: właściwości:

Wartość Definicja
VehicleType.RAIL Kolej.
VehicleType.METRO_RAIL Kolej miejska.
VehicleType.SUBWAY Podziemna kolej miejska.
VehicleType.TRAM Kolej miejska.
VehicleType.MONORAIL Kolej jednoszynowa.
VehicleType.HEAVY_RAIL Ciężka linia kolejowa.
VehicleType.COMMUTER_TRAIN Kolej podmiejska.
VehicleType.HIGH_SPEED_TRAIN Szybki pociąg.
VehicleType.BUS Autobus.
VehicleType.INTERCITY_BUS Autobus dalekobieżny.
VehicleType.TROLLEYBUS Trolejbus.
VehicleType.SHARE_TAXI Taksówka zbiorowa to rodzaj autobusu, który można podwieźć i odebrać mogą zwiększyć liczbę pasażerów w każdym miejscu na trasie.
VehicleType.FERRY Prom.
VehicleType.CABLE_CAR Pojazd poruszający się po kablu, zwykle na ziemi. Kabel antenowy samochody mogą być typu VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Kolej gondolowa.
VehicleType.FUNICULAR Pojazd wciągany po stromym wzniesieniu za pomocą kabla. Kolej linowo-terenowa zwykle składa się z dwóch samochodów, z których każdy stanowi przeciwwagę lub reszta.
VehicleType.OTHER Pozostałe pojazdy zwracają ten typ.

Sprawdzanie wyników wskazówek dojazdu

Komponenty DirectionsResults – DirectionsRoute, DirectionsLeg DirectionsStep i TransitDetails – mogą być sprawdzonej i używanej podczas analizowania dowolnej odpowiedzi z informacjami o kierunkach.

Ważne: jeśli renderujesz transport publiczny ręczne wskazówki dojazdu, zamiast korzystać z DirectionsRenderer musisz wyświetlić nazwy i adresy URL przewoźników o obsłudze wyników podróży.

W poniższym przykładzie przedstawiono trasę pieszą dla określonych turystów atrakcji w Nowym Jorku. Sprawdzamy DirectionsStep, aby dodać znaczniki do każdego etapu. załącz informacje do pliku InfoWindow z instrukcjami tekst dla tego kroku.

Uwaga: ponieważ obliczamy trasę pieszą, wyświetlamy też w osobnym panelu <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);
  });
}

W treści 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>

Zobacz przykład

Korzystanie z punktów pośrednich w trasach

Jak podano w żądaniu DirectionsRequest, możesz też określić punkty pośrednie (typu DirectionsWaypoint) podczas obliczania tras przy użyciu usługi wskazówek dojazdu (pieszych, rowerowych lub samochodowych); wskazówek dojazdu. Punkty pośrednie nie są dostępne dla wskazówek dojazdu transportem publicznym. Punkty pośrednie umożliwiają obliczanie tras przez dodatkowe lokalizacje, w w którym to przypadku zwrócona trasa przebiega przez podane punkty pośrednie.

Pole waypoint składa się z tych pól:

  • location (wymagany) określa adres od punktu na trasie.
  • stopover (opcjonalny) wskazuje, czy punkt pośredni jest rzeczywistym przystankiem na trasie (true) lub tylko trasę przez wskazane lokalizacja (false). Przesiadki: true domyślnie.
.

Domyślnie usługa Trasa dojazdu oblicza trasę podane punkty pośrednie w określonej kolejności. Opcjonalnie: może przekazać zasadę optimizeWaypoints: true w obrębie DirectionsRequest, by umożliwić usłudze Trasa dojazdu zoptymalizować wyznaczoną trasę przez zmianę kolejności punktów pośrednich aby zamówienie było bardziej efektywne. (Ta optymalizacja jest zastosowaniem problem z podróżnikiem). Głównym czynnikiem jest czas podróży, ale też inne czynniki, takie jak odległość, liczba skrętów i wiele innych. może być wzięty pod uwagę przy wyborze trasy, która jest najbardziej efektywna. Wszystkie punkty pośrednie muszą być punktami pośrednimi w usłudze wskazówek dojazdu, aby zapewnić ich .

Jeśli nakazujesz usłudze Trasa dojazdu optymalizowanie kolejności swoje punkty pośrednie, kolejność ich zostanie zwrócona waypoint_order w polu DirectionsResult obiekt.

W tym przykładzie obliczamy trasy przełajowe w Stanach Zjednoczonych przy użyciu różnych punktów początkowych i końcowych i punkty pośrednie. (Aby wybrać wiele punktów na trasie, naciśnij Naciśnij Ctrl i kliknij podczas wybierania pozycji na liście). Pamiętaj, że sprawdzamy routes.start_address i routes.end_address, by podać tekstem początkowym i końcowym każdej trasy.

TypeScript

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

Ograniczenia dotyczące punktów pośrednich Waypoints

Obowiązują następujące limity wykorzystania i ograniczenia:

  • Maksymalna liczba punktów pośrednich dozwolonych podczas korzystania z usługi wskazówek dojazdu w Maps JavaScript API ma wartość 25, oraz miejsce wylotu i cel podróży. Limity są takie same w przypadku Directions API usługi internetowej.
  • Dla Usługa internetowa interfejsu Directions API, klienci są dopuszczeni do 25 punkty pośrednie, a także punkt początkowy i docelowy.
  • Klienci korzystający z abonamentu premium na Google Maps Platform mogą mieć 25 ograniczeń punkty pośrednie, a także punkt początkowy i docelowy.
  • Punkty pośrednie nie są obsługiwane w przypadku wskazówek dojazdu transportem publicznym.

Przeciąganie trasy

Użytkownicy mogą modyfikować wskazówki dojazdu rowerem, pieszo lub samochodem wyświetlane za pomocą DirectionsRenderer dynamicznie, jeśli jest Możliwość przeciągania, dzięki czemu użytkownik może wybierać i zmieniać trasy, klikając i przeciągając odpowiednie ścieżki na mapie. Określasz, czy mechanizm renderowania umożliwia przeciąganie wskazówek dojazdu, ustawiając jej właściwość draggable do: true. Nie można przeciągać wskazówek dojazdu transportem publicznym.

Gdy trasę można przeciągać, użytkownik może zaznaczyć dowolny punkt na ścieżkę (lub punkt pośredni) renderowanego wyniku i przesuń zaznaczony do nowej lokalizacji. DirectionsRenderer zaktualizuje się dynamicznie, aby pokazać zmodyfikowaną ścieżkę. Po premierze przejściowy punkt pośredni zostanie dodany do mapy (co wskazuje mały biały znacznik). Zaznaczenie i przeniesienie segmentu ścieżki ten etap trasy można zmieniać, zaznaczając i przesuwając znacznik punktu pośredniego (w tym punkt początkowy i końcowy) zmieni odcinków trasy przebiegających przez ten punkt.

Przeciągane kierunki są modyfikowane i renderowane po stronie klienta, możesz monitorować i obsługiwać directions_changed na DirectionsRenderer, aby otrzymać powiadomienie, gdy użytkownik zmodyfikował wyświetlane wskazówki dojazdu.

Ten kod pokazuje podróż z Perth na zachodnim wybrzeżu Australii do Sydney na wschodnim wybrzeżu. Kod monitoruje directions_changed zdarzenie, aby zaktualizować całkowitą odległość na każdym etapie podróży.

TypeScript

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
Zobacz przykład

Zobacz próbkę