Usługa wyznaczania trasy

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Opis

Możesz wyznaczyć trasę (przy użyciu różnych metod transportu), korzystając z obiektu DirectionsService. Ten obiekt komunikuje się z usługą wyznaczania trasy w interfejsie Google Maps API, który odbiera żądania trasy i zwraca skuteczną ścieżkę. Czas podróży to główny czynnik zoptymalizowany, ale brane są pod uwagę inne czynniki, takie jak odległość, liczba zakrętów i wiele innych. Możesz przetworzyć te wyniki samodzielnie lub skorzystać z obiektu DirectionsRenderer do ich renderowania.

Podczas określania punktu początkowego lub miejsca docelowego w żądaniu wyznaczania trasy możesz podać ciąg zapytania (np. "Chicago, IL" "Dwinwin, NSW, Australia"), wartość LatLng lub obiekt Place.

Usługa wyznaczania trasy może zwracać wskazówki wieloczęściowe za pomocą serii punktów orientacyjnych. Trasa dojazdu jest wyświetlana w postaci linii łamanej trasy na mapie lub jako seria tekstu w elemencie <div> (np. „Zawróć w prawo do rampy na mostu Williamsburga”).

Pierwsze kroki

Zanim zaczniesz korzystać z usługi Routes API w interfejsie Maps JavaScript API, najpierw włącz ją w Google Cloud Console, w tym samym projekcie, który został skonfigurowany w przypadku interfejsu Maps JavaScript API.

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

  1. Otwórz Google Cloud Console.
  2. Kliknij przycisk Wybierz projekt, a następnie wybierz ten sam projekt, który masz skonfigurowany w interfejsie Maps JavaScript API, i kliknij Otwórz.
  3. Na liście interfejsów API w panelu znajdź DIRECTIONs API.
  4. Jeśli na liście widzisz interfejs API, nie musisz nic więcej robić. Jeśli interfejsu API nie ma na liście, włącz go:
    1. U góry strony wybierz ENABLE API (Włącz interfejs API), aby wyświetlić kartę Biblioteka. Możesz też wybrać Biblioteka z menu po lewej stronie.
    2. Wyszukaj Wskazówki dojazdu, a następnie wybierz je z listy wyników.
    3. Wybierz WŁĄCZ. Gdy proces się zakończy, na liście interfejsów API w panelu pojawi się interfejs API trasy.

Ceny i zasady

Ceny

16 lipca 2018 r. wprowadziliśmy nowy abonament, który pozwoli Ci korzystać z Map Google, tras i miejsc. Więcej informacji o nowych limitach cenowych i limitach użytkowania usługi Trasa dojazdu w języku JavaScript znajdziesz w artykule Użycie i płatności dla interfejsu Route API.

Ograniczenia liczby żądań

Weź pod uwagę te ograniczenia dotyczące dodatkowych żądań:

Limit szybkości jest stosowany do każdej sesji użytkownika, niezależnie od tego, ilu użytkowników korzysta z tego samego projektu. Przy pierwszym wczytaniu interfejsu API przydzielany jest początkowy limit żądań. Gdy wykorzystasz ten limit, interfejs API wymusza ograniczenia liczby żądań w ciągu dodatkowych sekund. Jeśli w określonym czasie pojawi się zbyt wiele żądań, interfejs API zwróci kod odpowiedzi OVER_QUERY_LIMIT.

Limit liczby żądań na sesję uniemożliwia korzystanie z usług po stronie klienta w przypadku żądań zbiorczych. W przypadku żądań zbiorczych użyj usługi internetowej DIRECTION API.

Zasady

Korzystanie z usługi Trasa musi być zgodne z zasadami opisanymi w interfejsie DIRECTION API.

Zapytania o trasę

Dostęp do usługi Trasa dojazdu jest asynchroniczny, ponieważ interfejs API Map Google musi wywoływać serwer zewnętrzny. Z tego powodu trzeba przekazać metodę wywołania zwrotnego, aby wykonać żądanie. Ta metoda wywołania zwrotnego powinna przetworzyć wyniki. Pamiętaj, że usługa wyznaczania trasy może zwracać więcej niż jeden możliwy plan podróży w formie tablicy routes[].

Aby skorzystać ze wskazówek w interfejsie Maps JavaScript API, utwórz obiekt typu DirectionsService i wywołaj żądanie DirectionsService.route(), by wysłać żądanie do usługi wyznaczania trasy. W tym celu przekaż dosłowny obiekt DirectionsRequest zawierający warunki wejściowe i metodę wywołania zwrotnego, które otrzymasz po otrzymaniu odpowiedzi.

Litera obiektu DirectionsRequest zawiera te pola:

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

Wyjaśniamy te pola:

  • origin (wymagany) określa lokalizację początkową, na której chcesz wyznaczyć trasę. Ta wartość może zostać określona jako String (np. "Chicago, IL") jako wartość LatLng lub obiekt Place. Jeśli używasz obiektu Place, możesz określić identyfikator miejsca, ciąg zapytania lub lokalizację LatLng. Identyfikatory miejsc możesz pobierać z usług geokodowania, wyszukiwania miejsc i autouzupełniania miejsc w interfejsie Maps JavaScript API. Przykład użycia identyfikatorów miejsc z autouzupełniania miejsc znajdziesz w artykule Autouzupełnianie i wskazówki dojazdu.
  • destination (wymagany) określa lokalizację końcową, do której chcesz wyznaczyć trasę. Opcje są takie same jak w przypadku pola origin opisanego powyżej.
  • travelMode (wymagany) określa środek transportu, który ma być używany podczas obliczania wskazówek dojazdu. Prawidłowe wartości znajdziesz poniżej w Trybach podróży.
  • transitOptions (opcjonalny) określa wartości dotyczące tylko żądań, w przypadku których travelMode to TRANSIT. Prawidłowe wartości znajdziesz poniżej w sekcji Opcje transportu publicznego.
  • drivingOptions (opcjonalny) określa wartości dotyczące tylko żądań, w przypadku których travelMode to DRIVING. Prawidłowe wartości znajdziesz poniżej w sekcji Opcje jazdy.
  • Parametr unitSystem (opcjonalny) określa system, którego należy użyć podczas wyświetlania wyników. Prawidłowe wartości znajdziesz poniżej w sekcji Systemy jednostek.

  • waypoints[] (opcjonalny) określa tablicę DirectionsWaypoint. Punkty pośrednie zmieniają trasę przez kierowanie jej przez określone lokalizacje. Punkt na trasie jest określony jako literał obiektu z polami widocznymi poniżej:

    • location określa lokalizację punktu na mapie jako LatLng, jako obiekt Place lub jako String, które będą kodowane.
    • stopover to wartość logiczna, która wskazuje, że punkt na trasie jest punktem zatrzymania na trasie, co skutkuje podzieleniem trasy na dwie trasy.

    Więcej informacji o punktach na trasie znajdziesz w sekcji Korzystanie z punktów na trasie w trasach poniżej.

  • optimizeWaypoints (opcjonalny) określa, że trasa wykorzystująca podaną wartość waypoints może być optymalizowana przez przeniesienie punktów na trasie w bardziej efektywnej kolejności. Jeśli zasada true jest zwrócona, usługa wyznaczania trasy zwróci w polu waypoint_order zmienioną kolejność waypoints (więcej informacji znajdziesz poniżej w sekcji Korzystanie z punktów końcowych w trasach).
  • provideRouteAlternatives (opcjonalny) gdy jest ustawiona na true, wskazuje, że usługa wyznaczania trasy może podawać w odpowiedzi więcej niż jedną trasę. Pamiętaj, że podanie alternatywnych tras może wydłużyć czas odpowiedzi z serwera. Ta opcja jest dostępna tylko w przypadku żądań bez pośrednich punktów na trasie.
  • Wartość avoidFerries (opcjonalna) ustawiona na true wskazuje, że obliczone trasy powinny, jeśli to możliwe, unikać promów.
  • Wartość avoidHighways (opcjonalna) ustawiona na true wskazuje, że obliczone trasy powinny w miarę możliwości unikać głównych autostrad.
  • Wartość avoidTolls (opcjonalna) ustawiona na true wskazuje, że obliczone trasy powinny w miarę możliwości unikać dróg płatnych.
  • region (opcjonalny) określa kod regionu określony jako 2-znakowy kod ccTLD (domena najwyższego poziomu"). Aby dowiedzieć się więcej, zapoznaj się poniżej z Odniesieniem do regionu.

Oto przykład 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 obliczaniu trasy musisz określić środek transportu, którego chcesz użyć. Obecnie obsługiwane są te środki transportu:

  • DRIVING (Ustawienie domyślne) wskazuje standardowe wskazówki dojazdu przy użyciu sieci drogi.
  • BICYCLING prosi o trasę rowerową przez ścieżki rowerowe i preferowane ulice.
  • TRANSIT prosi o wskazówki dojazdu transportem publicznym.
  • Aplikacja WALKING prosi o trasę pieszą obejmującą ścieżki piesze i chodniki.

Zapoznaj się ze szczegółowymi informacjami na temat zasięgu Google Maps Platform, aby dowiedzieć się, w jakim stopniu kraj obsługuje wskazówki dojazdu. Jeśli poprosisz o wskazówki dotyczące regionu, w którym dany typ trasy jest niedostępny, odpowiedź zwróci błąd DirectionsStatus="ZERO_RESULTS".

Uwaga: trasa piesza nie może zawierać wyraźnych ścieżek dla pieszych, więc w interfejsie DirectionsResult będą wyświetlane ostrzeżenia, które musisz wyświetlić, jeśli nie korzystasz z domyślnego ustawienia DirectionsRenderer.

Opcje transportu publicznego

Dostępne opcje zapytania o trasę różnią się w zależności od środka transportu. Podczas wysyłania zapytania o trasę transportu publicznego opcje avoidHighways, avoidTolls, waypoints[] i optimizeWaypoints będą ignorowane. Opcje routingu związane z transportem publicznym możesz określić w literale obiektu TransitOptions.

Wskazówki dojazdu transportem publicznym są pilne. Wskazówki dojazdu będą zwracane tylko w przyszłości.

Litera obiektu TransitOptions zawiera te pola:

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

Wyjaśniamy te pola:

  • arrivalTime (opcjonalny) określa wymagany czas dotarcia jako obiekt Date. Jeśli określisz godzinę przyjazdu, godzina wyjazdu zostanie zignorowana.
  • departureTime (opcjonalny) określa żądany czas wyjazdu jako obiekt Date. Jeśli zostanie określona właściwość arrivalTime, właściwość departureTime będzie ignorowana. Jeśli w polu departureTime lub arrivalTime nie podasz żadnej wartości, zostanie użyta domyślna wartość, czyli bieżąca data.
  • modes[] (opcjonalny) to tablica zawierająca co najmniej 1 literalnię obiektu TransitMode. To pole można uwzględnić tylko wtedy, gdy żądanie zawiera klucz interfejsu API. Każdy obiekt TransitMode określa preferowany środek transportu. Dozwolone są te wartości:
    • BUS wskazuje, że obliczona trasa powinna preferować podróż autobusem.
    • RAIL wskazuje, że obliczona trasa powinna obejmować podróże pociągiem, tramwajem, tramwajem lub metrem.
    • SUBWAY wskazuje, że obliczona trasa powinna podróżować metrem.
    • TRAIN wskazuje, że obliczona trasa powinna podróżować pociągiem.
    • TRAM wskazuje, że obliczona trasa powinna korzystać z tramwaju i tramwaju.
  • routingPreference (opcjonalny) określa ustawienia tras transportu publicznego. Ta opcja może wpływać na wyświetlane opcje, zamiast akceptować domyślną trasę wybraną przez interfejs API. To pole można określić tylko wtedy, gdy żądanie zawiera klucz interfejsu API. Dozwolone są te wartości:
    • FEWER_TRANSFERS wskazuje, że obliczona trasa powinna mieć ograniczoną liczbę transferów.
    • LESS_WALKING wskazuje, że obliczona trasa powinna mieć ograniczoną liczbę spacerów.

Przykładowy element DirectionsRequest w formie transportu publicznego znajdziesz poniżej:

{
  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

Opcje wyznaczania trasy dojazdu możesz określić za pomocą obiektu DrivingOptions.

Obiekt DrivingOptions zawiera te pola:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Wyjaśniamy te pola:

  • departureTime (wymagany w przypadku literału obiektu drivingOptions) wymagany czas wyjazdu jako obiekt Date. Wartość musi być ustawiona na bieżącą lub godzinę w przyszłości. Nie może być datą z przeszłości. (Aby zapewnić spójność obsługi stref czasowych, interfejs API konwertuje wszystkie daty na UTC). Jeśli w ofercie klienta Google Maps Platform Premium uwzględnisz w żądaniu żądanie departureTime, interfejs API zwróci najlepszą trasę zgodnie z oczekiwanymi warunkami ruchu i będzie uwzględniać w odpowiedzi przewidywany czas (duration_in_traffic). Jeśli nie określisz godziny odjazdu (tzn. jeśli żądanie nie obejmuje drivingOptions), zwracana trasa jest zasadniczo właściwą trasą bez uwzględniania warunków na drodze.
  • trafficModel (opcjonalny) określa założenia, które mają być używane podczas obliczania czasu w ruchu. To ustawienie wpływa na wartość zwracaną w polu duration_in_traffic w odpowiedzi, która zawiera przewidywany czas na podstawie średnich wartości historycznych. Domyślna wartość to bestguess. Dozwolone są te wartości:
    • bestguess (wartość domyślna) wskazuje, że zwrócony znacznik duration_in_traffic powinien być najlepszym szacowanym czasem podróży przy uwzględnieniu zarówno historycznych danych o ruchu, jak i aktualnego ruchu. Aktualne natężenie ruchu stało się ważniejsze, gdy departureTime jest bliżej.
    • pessimistic wskazuje, że zwrócony obiekt duration_in_traffic powinien być dłuższy niż rzeczywisty czas podróży w większości dni, ale czasami dni o szczególnie złym natężeniu ruchu mogą przekraczać tę wartość.
    • optimistic wskazuje, że zwrócony czas duration_in_traffic powinien być krótszy niż rzeczywisty czas podróży w większości dni, chociaż w przypadku dni, w których natężenie ruchu jest wyjątkowo dobre, może być szybsze niż ta wartość.

Poniżej znajdziesz przykładowe wskazówki dojazdu (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'
  }
}

Systemy jednostek

Domyślnie wskazówki są obliczane i wyświetlane przy użyciu systemu jednostek kraju lub regionu pochodzenia. Uwaga: punkty początkowego podane na podstawie szerokości i długości geograficznej zamiast adresów są zawsze stosowane do jednostek metrycznych. Na przykład trasa z „"Chicago, Illinos” do &„Tonto”, „ONT&quot” będzie wyświetlać wyniki w milach, a trasa odwrotna – w kilometrach. Możesz zastąpić ten system jednostek, ustawiając jedną z nich w żądaniu za pomocą jednej z tych wartości UnitSystem:

  • UnitSystem.METRIC określa wykorzystanie systemu wskaźników. Odległość jest wyświetlana w kilometrach.
  • UnitSystem.IMPERIAL określa sposób użycia systemu cesarskiego (w języku angielskim). Odległość jest wyświetlana w milach.

Uwaga: to ustawienie systemowe ma wpływ tylko na tekst wyświetlany użytkownikowi. Wynik wskazówki dojazdu zawiera też wartości odległości, które nie są wyświetlane użytkownikowi i zawsze są wyrażone w metrach.

Uwzględnianie ze względu na region wskazówek dojazdu

Usługa wyznaczania trasy w interfejsie Google Maps API zwraca wyniki adresów, na które ma wpływ domena (region lub kraj), z którego została wczytana ikona wczytywania JavaScriptu. (Większość użytkowników ładuje stronę https://maps.googleapis.com/, co powoduje ustawienie domeny domyślnej na Stany Zjednoczone). Jeśli wczytasz pasek rozruchowy z innej obsługiwanej domeny, otrzymasz wyniki, na które ma wpływ ta domena. Na przykład wyszukiwania hasła „San Francisco” mogą zwracać inne wyniki niż aplikacje wczytywane przez https://maps.googleapis.com/ (Stany Zjednoczone) niż wczytywane w http://maps.google.es/ (Hiszpania).

Możesz też skonfigurować usługę Trasa dojazdu w taki sposób, by zwracała wyniki dla konkretnego regionu za pomocą parametru region. Ten parametr przyjmuje kod regionu określony jako dwuznakowy (nienumeryczny) subtag regionu Unicode. W większości przypadków te tagi są mapowane bezpośrednio na wartości dwuliterowe ccTLD (i domen najwyższego poziomu), takie jak "uk" w "co.uk" W niektórych przypadkach tag region obsługuje też kody ISO-3166-1, które czasem różnią się od wartości ccTLD (np. &&tt;GB "Wielka Brytania").

Jeśli używasz parametru region:

  • Podaj tylko jeden kraj lub region. Kilka wartości jest ignorowane, co może skutkować niepowodzeniem żądania.
  • Używaj tylko dwuznakowych subtagów regionów (format Unicode CLDR). Pozostałe dane wejściowe będą powodować błędy.

Odchylenie regionu jest obsługiwane tylko w przypadku krajów i regionów obsługujących wskazówki dojazdu. Więcej informacji o międzynarodowym zasięgu interfejsu Route API znajdziesz w sekcji Szczegóły pokrycia w Google Maps Platform.

Wskazówki dotyczące renderowania

Inicjowanie prośby o wskazówki dojazdu do DirectionsService za pomocą metody route() wymaga wywołania zwrotnego, które jest wykonywane po zakończeniu żądania usługi. To wywołanie zwrotne zwróci w odpowiedzi kod DirectionsResult i DirectionsStatus.

Stan zapytania o trasę dojazdu

DirectionsStatus może zwracać te wartości:

  • OK wskazuje, że odpowiedź zawiera prawidłowy element DirectionsResult.
  • Parametr NOT_FOUND wskazuje co najmniej 1 lokalizację podaną w żądaniu, punkcie docelowym lub punktach orientacyjnych nie mogą być zakodowane.
  • ZERO_RESULTS wskazuje, że nie można znaleźć trasy między źródłem a miejscem docelowym.
  • Pole MAX_WAYPOINTS_EXCEEDED wskazuje, że w polu DirectionsRequest podano zbyt wiele pól DirectionsWaypoint. Zapoznaj się z sekcją poniżej dotyczącą limitów punktów na trasie.
  • MAX_ROUTE_LENGTH_EXCEEDED wskazuje, że żądana trasa jest zbyt długa i nie może być przetworzona. Ten błąd występuje podczas zwracania bardziej złożonych wskazówek. Spróbuj zmniejszyć liczbę punktów trasy, zakrętów lub instrukcji.
  • Wartość INVALID_REQUEST wskazuje, że podana wartość DirectionsRequest jest nieprawidłowa. Najczęstsze przyczyny tego błędu to żądania, które nie zawierają punktu początkowego lub miejsca docelowego, lub żądanie transportu publicznego, które zawiera punkty trasy.
  • OVER_QUERY_LIMIT oznacza, że w danym okresie strona wysłała zbyt wiele żądań.
  • REQUEST_DENIED wskazuje, że strona internetowa nie może używać usługi wyznaczania trasy.
  • UNKNOWN_ERROR wskazuje, że nie udało się przetworzyć żądania trasy z powodu błędu serwera. Żądanie może się udać, jeśli spróbujesz ponownie.

Musisz się upewnić, że zapytanie wskazówek dojazdu zwróci prawidłowe wyniki, zanim przetworzysz wynik.

Wyświetlanie trasy dojazdu

DirectionsResult zawiera wynik zapytania o trasę, które możesz wykonać samodzielnie lub przekazać do obiektu DirectionsRenderer, który może automatycznie wyświetlać wynik na mapie.

Aby wyświetlić DirectionsResult za pomocą DirectionsRenderer, musisz wykonać te czynności:

  1. Utwórz obiekt DirectionsRenderer.
  2. Wywołaj setMap() w mechanizmie renderowania, aby powiązać go z przekazaną mapą.
  3. Wywołaj setDirections() w mechanizmie renderowania, przekazując DirectionsResult zgodnie z opisem powyżej. Renderer to MVCObject, więc automatycznie wykryje wszystkie zmiany w jego właściwościach i zaktualizuje mapę, gdy zmienią się wskazówki dojazdu.

Poniższy przykład pokazuje obliczanie trasy między 2 lokalizacjami na trasie nr 66, gdzie punkt początkowy i miejsce docelowe są podane przez wartości "start" i "end" z listy. DirectionsRenderer obsługuje wyświetlanie linii łamanej między wskazanymi lokalizacjami, a także umiejscowienie znaczników w miejscu początkowym, docelowym i w razie potrzeby punktów trasy.

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

Poniższy przykład pokazuje trasy z różnymi środkami transportu między Haight-Ashbury a Ocean Beach w San Francisco w Kalifornii:

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 obsługuje nie tylko wyświetlanie linii łamanej i powiązanych znaczników, ale także tekstowe wyświetlanie wskazówek dojazdu w postaci serii kroków. Aby to zrobić, wywołaj metodę setPanel() na urządzeniu DirectionsRenderer, przekazując jej <div> w celu wyświetlenia tych informacji. W ten sposób upewnisz się też, że wyświetlą się odpowiednie informacje o prawach autorskich i wszystkie ostrzeżenia, które mogą być związane z wynikiem.

Wskazówki tekstowe będą dostarczane za pomocą ustawienia preferowanego języka lub języka podanego podczas wczytywania kodu JavaScript interfejsu API przy użyciu parametru language. (Więcej informacji znajdziesz w artykule Lokalizacja). W przypadku wskazówek dojazdu transportem publicznym czas będzie wyświetlany w strefie czasowej danego przystanku.

Poniższy przykład jest taki sam jak pokazany powyżej, ale zawiera panel <div>, w którym wyświetlają się wskazówki dojazdu:

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 DIRECTIONResult

Gdy wyślesz żądanie wyznaczania trasy do elementu DirectionsService, otrzymasz odpowiedź zawierającą kod stanu oraz wynik, który jest obiektem DirectionsResult. DirectionsResult to literał obiektów z tymi polami:

  • geocoded_waypoints[] zawiera tablicę DirectionsGeocodedWaypoint obiektów, z których każdy zawiera szczegółowe informacje na temat geokodowania źródeł, miejsc docelowych i punktów na trasie.
  • routes[] zawiera tablicę DirectionsRoute obiektów. Każda trasa wskazuje sposób dotarcia z punktu początkowego do miejsca docelowego określonego w polu DirectionsRequest. W odpowiedzi na każde żądanie zwracana jest tylko 1 trasa, chyba że w polu provideRouteAlternatives w żądaniu ustawiono wartość true, gdzie może zostać zwróconych wiele tras.

Uwaga: właściwość via_waypoint jest wycofana na alternatywnych trasach. Wersja 3.27 to ostatnia wersja interfejsu API, która dodaje kolejne punkty trasy na alternatywnych trasach. W wersji 3.28 i nowszych możesz nadal implementować przeciągane trasy, korzystając z usługi Trasa dojazdu, wyłączając przeciąganie alternatywnych tras. Możesz przeciągać tylko trasę główną. Użytkownicy mogą przeciągać trasę główną, która odpowiada alternatywnej trasie.

Wskazówki dojazdu z kodowaniem geograficznym

DirectionsGeocodedWaypoint zawiera szczegółowe informacje o geokodowaniu punktów początkowych i docelowych oraz punktów orientacyjnych.

DirectionsGeocodedWaypoint to literał obiektów z tymi polami:

  • geocoder_status wskazuje kod stanu powstały w wyniku operacji geokodowania. To pole może zawierać następujące wartości.
    • "OK" oznacza, że nie wystąpiły żadne błędy. Udało się przeanalizować adres. Zwrócono co najmniej 1 kod geograficzny.
    • Wartość "ZERO_RESULTS" oznacza, że przetwarzanie danych geograficznych zakończyło się powodzeniem, ale nie zwróciło żadnych wyników. Ten błąd może wystąpić, gdy koder został przekazany do nieistniejącego address.
  • partial_match oznacza, że koder nie zwrócił dokładnego dopasowania do pierwotnego żądania, mimo że mógł dopasować część żądanego adresu. Sprawdź oryginalny wniosek o błędną pisownię lub niepełny adres.

    Częściowo dopasowania występują najczęściej w przypadku adresów, które nie istnieją w miejscowości, którą przekazujesz. Częściowe dopasowania mogą być też zwracane w przypadku, gdy żądanie pasuje do co najmniej dwóch lokalizacji w tym samym regionie. Na przykład &Hitpar St, Bristol, UK" zwróci częściowe dopasowanie dla ulicy Helena i Henrietta. Jeśli w żądaniu znajduje się błędnie podany komponent adresu, usługa geokodowania może zaproponować inny adres. Sugerowane w ten sposób sugestie zostaną oznaczone jako częściowe dopasowanie.

  • place_idto unikalny identyfikator miejsca, który może być używany z innymi interfejsami API Google. Możesz na przykład użyć właściwości place_id z biblioteką Miejsca Google Places, aby uzyskać informacje o lokalnej firmie, takie jak numer telefonu, godziny otwarcia czy opinie użytkowników. Zobacz omówienie identyfikatora miejsca.
  • types[] to tablica wskazująca typ zwróconego wyniku. Ta tablica zawiera zestaw zero lub więcej tagów identyfikujących typ funkcji zwróconej w wyniku. Na przykład kod geograficzny „>Chicago" return "locality"”, który wskazuje, że "Chicago" jest miastem, a także zwraca „"political"”, który wskazuje, że jest to podmiot polityczny.

Trasy dojazdu

Uwaga: starszy obiekt DirectionsTrip zmienił nazwę na DirectionsRoute. Pamiętaj, że teraz trasa odnosi się do całej trasy na początku, a nie do końca podróży rodzica.

DirectionsRoute zawiera 1 wynik z określonego źródła i miejsca docelowego. Ta trasa może składać się z 1 lub większej liczby odnóg (typ DirectionsLeg) w zależności od tego, czy zostały określone punkty trasy. Na trasie znajdują się również informacje o prawach autorskich i ostrzeżeniach, które muszą być wyświetlane razem z informacjami o trasie.

DirectionsRoute to literał obiektów z tymi polami:

  • legs[] zawiera tablicę obiektów DirectionsLeg, z których każdy zawiera informacje o nowym odcinku trasy z 2 lokalizacji na danej trasie. Dla każdego określonego punktu na trasie lub miejsca docelowego pojawi się osobny etap. (Trasa bez punktów orientacyjnych będzie zawierać dokładnie DirectionsLeg). Każdy etap składa się z serii DirectionStep s.
  • waypoint_order zawiera tablicę wskazującą kolejność punktów na trasie, które znajdują się w obliczonej trasie. Ta tablica może zawierać zmienioną kolejność, jeśli element DirectionsRequest został przekazany jako optimizeWaypoints: true.
  • overview_path zawiera tablicę LatLng, która reprezentuje przybliżoną (wygładzoną) ścieżkę wyników.
  • overview_polyline zawiera jeden obiekt points, który zawiera linię zakodowaną na podstawie zakodowanej linii. Ta linia liniowa to przybliżona (wygładzona) ścieżka wyniku.
  • bounds zawiera LatLngBounds wskazujący granice linii łamanej na tej trasie.
  • copyrights zawiera tekst dotyczący praw autorskich, który ma być wyświetlany na tej trasie.
  • warnings[] zawiera tablicę ostrzeżeń, które trzeba wyświetlić, aby wyświetlić te wskazówki. Jeśli nie używasz podanego obiektu DirectionsRenderer, musisz samodzielnie obsługiwać i wyświetlać te ostrzeżenia.
  • fare zawiera łączną cenę (czyli łączne koszty biletów) na tej trasie. Ta właściwość jest zwracana tylko w przypadku żądań transportu publicznego i tylko w przypadku tras, dla których dostępne są informacje o cenach wszystkich etapów podróży. Obejmują one:
    • currency: kod waluty ISO 4217 wskazujący walutę, w której wyrażona jest kwota.
    • value: łączna kwota opłaty w walucie określonej powyżej.

Nogi kierunkowe

Uwaga: starszy obiekt DirectionsRoute zmienił nazwę na DirectionsLeg.

DirectionsLeg to jeden etap podróży ze źródła do miejsca docelowego na obliczonej trasie. W przypadku tras, które nie mają żadnych punktów na trasie, trasa będzie się składać z jednego (lub kilku) punktów, ale w przypadku tras, które definiują co najmniej jeden punkt na trasie, będzie się składać z jednego lub kilku odnóg odpowiadających wybranym etapom.

DirectionsLeg to literał obiektów z tymi polami:

  • steps[] zawiera tablicę obiektów DirectionsStep wskazujących informacje o poszczególnych etapach kroku.
  • distance wskazuje łączną odległość pokrytą nogą jako obiekt Distance w tej postaci:

    • value wskazuje dystans w metrach
    • text zawiera ciąg tekstowy reprezentujący odległość, która jest domyślnie wyświetlana w jednostkach używanych w punkcie początkowym. (np. mile będą używane dla dowolnego punktu początkowego w Stanach Zjednoczonych). Możesz zastąpić ten system jednostek, ustawiając UnitSystem w pierwotnym zapytaniu. Pamiętaj, że bez względu na używany system jednostek pole distance.value zawsze zawiera wartość wyrażoną w metrach.

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

  • duration wskazuje łączny czas trwania tego kroku jako obiekt Duration o tej postaci:

    • value wskazuje czas trwania w sekundach.
    • text zawiera ciąg znaków reprezentujący czas trwania.

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

  • duration_in_traffic wskazuje całkowity czas trwania tego kroku, z uwzględnieniem bieżących warunków ruchu. duration_in_traffic jest zwracany tylko wtedy, gdy są spełnione wszystkie te warunki:

    • Żądanie nie zawiera punktów pośrednich. To oznacza, że nie obejmuje ona punktów, gdzie stopover to true.
    • Prośba dotyczy wskazówek dojazdu – mode to driving.
    • departureTime znajduje się w polu drivingOptions w żądaniu.
    • Dostępne są informacje o warunkach na drodze.

    duration_in_traffic zawiera te pola:

    • value wskazuje czas trwania w sekundach.
    • text zawiera czytelną informację o czasie trwania.
  • arrival_time to szacowany czas dotarcia na ten etap. 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 jako obiekt JavaScript Date.
    • text godzinę określoną jako ciąg znaków. Czas będzie wyświetlany w strefie czasowej przystanku transportu publicznego.
    • time_zone zawiera strefę czasową tej stacji. Wartość to nazwa strefy czasowej określona w bazie danych stref czasowych IANA, np. &America/Nowa_Warszawa".
  • departure_time to szacowany czas wyjazdu na ten etap. Jest on określony jako obiekt Time. departure_time są dostępne tylko w przypadku wskazówek dojazdu transportem publicznym.
  • start_location zawiera LatLng punktu początkowego tego kroku. Usługa internetowa Trasa dojazdu oblicza trasy między lokalizacjami za pomocą najbliższej opcji transportu (zazwyczaj drogi) na punkcie początkowym i końcowym, dlatego start_location może różnić się od podanego punktu początkowego, jeśli na przykład droga nie znajduje się na początku.
  • end_location zawiera LatLng miejsca docelowego tego kroku. DirectionsService oblicza wskazówki dojazdu między lokalizacjami, korzystając z najbliższej opcji transportu (zazwyczaj drogi) na początku i końcu, więc end_location może być inny niż podany przez Ciebie cel podróży, jeśli na przykład droga nie znajduje się w miejscu docelowym.
  • start_address zawiera czytelny dla człowieka adres (zazwyczaj adres) na początku tego kroku.

    Ta treść powinna być czytana w niezmienionej postaci. Nie analizuj automatycznie sformatowanego adresu.
  • end_address zawiera czytelny dla człowieka adres (zwykle ulicę) na końcu tego noga.

    Ta treść powinna być czytana w niezmienionej postaci. Nie analizuj automatycznie sformatowanego adresu.

Trasa dojazdu

DirectionsStep to najbardziej atomowa jednostka trasy i zawierająca 1 krok opisujący konkretną instrukcję na trasie. Np. „" Skręć w lewo na W. Czwarty Św. Ten krok nie tylko opisuje instrukcje, ale też zawiera informacje o odległości i czasie trwania w odniesieniu do poniższego kroku. Na przykład krok opisany jako „"Scal się z I-80 Zachodem” może zawierać czas trwania „37 mil” i „40 minut”, co wskazuje, że kolejny krok to 37 mil/40 minut od tego kroku.

Podczas korzystania z usługi Trasa dojazdu do wyszukiwania wskazówek dojazdu transportem publicznym w tablicy kroków pojawią się dodatkowe informacje o transporcie publicznym w postaci obiektu transit. Jeśli wskazówki dojazdu obejmują wiele środków transportu, w tablicy steps[] pojawią się szczegółowe wskazówki dotyczące pieszych lub samochodowych kroków. Na przykład krok spacerowy będzie obejmować wskazówki dojazdu z lokalizacji początkowej i końcowej: "Przejdź na stronę Innes Ave & Fitch St". Obejmuje to szczegółowe wskazówki dojazdu tą trasą w tablicy steps[], takie jak: "Kieruj się w kierunku północnym na zachód

DirectionsStep to literał obiektów z tymi polami:

  • instructions zawiera instrukcje dotyczące tego kroku w ciągu tekstowym.
  • distance zawiera odległość przebytą w tym kroku do obiektu następnego (jako obiekt Distance). Więcej informacji znajdziesz powyżej w sekcji DirectionsLeg. To pole może być nieokreślone, jeśli odległość jest nieznana.
  • duration to szacowany czas potrzebny na wykonanie tego kroku (do następnego kroku) jako obiekt Duration. Więcej informacji znajdziesz powyżej w sekcji DirectionsLeg. To pole może być nieokreślone, jeśli czas trwania jest nieznany.
  • start_location zawiera dane geograficzne LatLng z punktu początkowego tego kroku.
  • end_location zawiera LatLng punktu końcowego tego kroku.
  • polyline zawiera jeden obiekt points, który zawiera reprezentację zakodowanej linii łamanej kroku. Ta linia liniowa to przybliżona (wygładzona) ścieżka kroku.
  • steps[] dosłowny obiekt DirectionsStep ze szczegółowymi wskazówkami dotyczącymi trasy pieszej lub dojazdu na trasie dojazdu. Kroki podrzędne są dostępne tylko w przypadku wskazówek dojazdu transportem publicznym.
  • travel_mode zawiera TravelMode używany w tym kroku. Wskazówki dojazdu transportem publicznym mogą obejmować kombinację wskazówek dojazdu pieszo i transportem publicznym.
  • path zawiera tablicę LatLngs z opisem przebiegu tego kroku.
  • transit zawiera informacje o transporcie publicznym, np. godziny przyjazdu i odjazdu oraz nazwę linii transportu publicznego.

Szczegółowe informacje o transporcie publicznym

Wskazówki dojazdu transportem publicznym zwracają dodatkowe informacje, które nie są istotne w przypadku innych środków transportu. Te dodatkowe właściwości są ujawniane przez obiekt TransitDetails, który jest zwracany jako właściwość DirectionsStep. W obiekcie TransitDetails masz dostęp do dodatkowych informacji o obiektach TransitStop, TransitLine, TransitAgency i VehicleType, jak opisano poniżej.

Szczegóły transportu publicznego

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

  • arrival_stop zawiera obiekt TransitStop reprezentujący stację przyjazdu/przystanek z tymi właściwościami:
    • name nazwę stacji/przystanku. np. "Union Square"
    • location lokalizacja stacji/przystanku transportu publicznego przedstawionego jako LatLng.
  • departure_stop zawiera obiekt TransitStop reprezentujący stację odjazdu/przystanku.
  • arrival_time zawiera godzinę przyjazdu określoną jako obiekt Time z 3 właściwościami:
    • value, czas określony jako obiekt JavaScript Date.
    • text godzinę określoną jako ciąg znaków. Czas będzie wyświetlany w strefie czasowej przystanku transportu publicznego.
    • time_zone zawiera strefę czasową tej stacji. Wartość to nazwa strefy czasowej określona w bazie danych stref czasowych IANA, np. &America/Nowa_Warszawa".
  • departure_time zawiera czas odjazdu określony jako obiekt Time.
  • headsign określa kierunek, w którym należy jechać, na tej linii, zgodnie z oznaczeniem pojazdu lub przystanku postojowego. Często będzie to stacja końcowa.
  • headway, gdy jest dostępna, określa oczekiwaną liczbę sekund między odjazdami z tego samego przystanku w tej chwili. Jeśli na przykład headway ma wartość 600, możesz liczyć na 10 minut oczekiwania, jeśli nie będziesz autobusu.
  • line zawiera literał obiektu TransitLine zawierający informacje o linii transportu publicznego użytej w tym kroku. TransitLine podaje nazwę i operatora wiersza oraz inne właściwości opisane w dokumentacji referencyjnej TransitLine.
  • num_stops zawiera liczbę przesiadek w tym kroku. Obejmuje przystanek przylotu, ale nie przystanek wylotu. Jeśli na przykład wskazówki dojazdu obejmują postój z A, przejazdy B i C oraz przystanek D, przystanek num_stops zwróci wartość 3.

Linia komunikacyjna

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

  • name zawiera pełną nazwę linii transportu publicznego. np. "7 avenue Express" &"14th St Crosstown".
  • short_name zawiera krótką nazwę linii transportu publicznego. Zwykle jest to numer wiersza, np. "2" lub "M14&quot..
  • agencies to tablica zawierająca pojedynczy obiekt TransitAgency. Obiekt TransitAgency zawiera informacje o operatorze tej linii, w tym te właściwości:
    • name zawiera nazwę przewoźnika.
    • phone zawiera numer telefonu przewoźnika.
    • url zawiera adres URL przewoźnika.

    Uwaga: jeśli renderujesz trasę dojazdu ręcznie, zamiast korzystać z obiektu DirectionsRenderer, musisz wyświetlić nazwy i adresy URL przewoźników obsługujących wyniki podróży.

  • url zawiera adres URL tej linii transportu publicznego podany przez przewoźnika.
  • icon zawiera adres URL ikony powiązanej z tym wierszem. Większość miast korzysta z ogólnych ikon, które różnią się w zależności od typu pojazdu. Niektóre linie transportu publicznego, np. system metra New York, mają specjalne ikony.
  • color zawiera kolor, który jest powszechnie używany na szyldach i znakach transportu publicznego. Kolor zostanie podany w postaci ciągu szesnastkowego, np. #FF0033.
  • text_color zawiera kolor tekstu najczęściej używany do oznaczenia tej linii. Kolor zostanie podany w postaci ciągu szesnastkowego.
  • vehicle zawiera obiekt Vehicle z tymi właściwościami:
    • name zawiera nazwę pojazdu w tym wierszu. np. "metro."
    • type zawiera typ pojazdu używany w tym wierszu. Pełną listę obsługiwanych wartości znajdziesz w dokumentacji typu pojazdu.
    • icon zawiera adres URL ikony zwykle powiązanej z tym typem pojazdu.
    • local_icon zawiera adres URL ikony powiązanej z tym typem pojazdu na podstawie lokalnego oznakowania transportu.

Typ pojazdu

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

Wartość Definicja
VehicleType.RAIL Kolej.
VehicleType.METRO_RAIL Kolej miejska.
VehicleType.SUBWAY Podziemna kolej miejska.
VehicleType.TRAM Nad ziemią.
VehicleType.MONORAIL Kolej jednoszynowa.
VehicleType.HEAVY_RAIL Ciężarowa kolejka.
VehicleType.COMMUTER_TRAIN Kolej podmiejska.
VehicleType.HIGH_SPEED_TRAIN Kolej dużych prędkości.
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 zabrać ze sobą i odebrać pasażerów w dowolnym miejscu na trasie.
VehicleType.FERRY Prom.
VehicleType.CABLE_CAR Pojazd pracujący na kablu, zwykle na ziemi. Kolejka linowa może mieć typ VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Kolejka linowa.
VehicleType.FUNICULAR Pojazd ciągnięty stromym pochyleniem przez kabel. Kolejka linowa zwykle składa się z 2 samochodów, a każdy z nich pełni rolę przeciwnika.
VehicleType.OTHER Wszystkie inne pojazdy będą zwracać ten typ pojazdu.

Sprawdzanie wyników wyszukiwania wskazówek dojazdu

Komponenty DirectionsResultsDirectionsRoute, DirectionsLeg, DirectionsStep i TransitDetails – mogą być sprawdzane i używane podczas analizowania odpowiedzi dojazdu.

Ważne: jeśli renderujesz trasę dojazdu ręcznie, zamiast używać obiektu DirectionsRenderer, musisz wyświetlić nazwy i adresy URL przewoźników obsługujących wyniki podróży.

W tym przykładzie przedstawiono trasy piesze do określonych atrakcji turystycznych w Nowym Jorku. Sprawdzamy trasęDirectionsStep, aby dodać znaczniki do każdego kroku oraz dołączyć do InfoWindow informacje z instrukcją tego kroku.

Uwaga: obliczamy trasy piesze, więc wyświetlane są też ostrzeżenia 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 na trasie

Jak określono w polu Wskazówki dojazdu, możesz też określać punkty trasy (typu DirectionsWaypoint) podczas obliczania tras w usłudze Trasa dojazdu pieszo, rowerem lub samochodem. Punkty pośrednie są niedostępne w przypadku wskazówek dojazdu transportem publicznym. Punkty pośrednie umożliwiają obliczanie tras przez dodatkowe lokalizacje. W takim przypadku zwracana trasa przechodzi przez te punkty.

waypoint składa się z następujących pól:

  • location (wymagany) określa adres punktu na trasie.
  • stopover (opcjonalnie) wskazuje, czy ten punkt na trasie jest rzeczywistym przystankiem na trasie (true) czy tylko preferencji związanych z trasą we wskazanej lokalizacji (false). Przesiadki są domyślnie ustawione na true.

Domyślnie usługa wyznaczania trasy oblicza trasę przez określone punkty trasy w określonej kolejności. Opcjonalnie możesz przekazać właściwość optimizeWaypoints: true w obrębie znaczników DirectionsRequest, aby umożliwić funkcji wyznaczania trasy optymalizowanie podanej trasy przez zmianę kolejności punktów na liście w bardziej efektywnej kolejności. Ta optymalizacja stanowi zastosowanie do problemu podróżnego w zespole ds. sprzedaży. Głównym czynnikiem w optymalizacji jest czas podróży, ale przy podejmowaniu decyzji, która trasa jest najskuteczniejsza, mogą być brane pod uwagę inne czynniki, takie jak odległość, liczba zakrętów i wiele innych. Aby można było zoptymalizować trasę, wskazówki dojazdu muszą być zatrzymane.

Jeśli poinstruujesz usługę wyznaczania trasy, aby zoptymalizować kolejność punktów na trasie, ich kolejność zostanie zwrócona w polu waypoint_order w obiekcie DirectionsResult.

Przykład poniżej oblicza trasy biegowe dla wszystkich Stanów Zjednoczonych z różnymi punktami startowymi, punktami końcowymi i punktami trasy. (Aby wybrać kilka punktów na liście, naciśnij Ctrl podczas zaznaczania elementów na liście). Pamiętaj, że sprawdzamy routes.start_address i routes.end_address, by podać tekst każdej trasy punktu początkowego i końcowego.

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;

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;

Ograniczenia dotyczące punktów pośrednich

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

  • Maksymalna liczba punktów trasy, które mogą być używane podczas korzystania z usługi wyznaczania trasy w interfejsie Maps JavaScript API, wynosi 25, łącznie z punktem początkowym i miejscem docelowym. Limity są takie same w przypadku usługi internetowej DIRECTION API.
  • W przypadku usługi internetowej Route API klienci mogą mieć 25 punktów trasy plus punkt początkowy i miejsce docelowe.
  • Klienci korzystający z abonamentu premium na Google Maps Platform mogą mieć do 25 punktów na trasie oraz informację o źródle i miejscu docelowym.
  • Punkty pośrednie nie są obsługiwane w przypadku wskazówek dojazdu transportem publicznym.

Wskazówki przesuwane

Użytkownicy mogą dynamicznie zmieniać trasy piesze, piesze i rowerowe wyświetlane za pomocą DirectionsRenderer, jeśli są przeciągane, co pozwala użytkownikowi wybierać i zmieniać trasy przez kliknięcie i przeciągnięcie otrzymanych ścieżek na mapie. Aby określić, czy wyświetlacz renderowania umożliwia przeciąganie, możesz ustawić właściwość draggable na true. Nie można przeciągnąć trasy dojazdu transportem publicznym.

Podczas przeciągania trasy użytkownik może wybrać dowolny punkt na ścieżce (lub punkcie pośrednim) wyrenderowanego wyniku i przenieść wyznaczony komponent do nowej lokalizacji. Element DirectionsRenderer będzie się dynamicznie aktualizować w celu wyświetlenia zmodyfikowanej ścieżki. Po zwolnieniu miejsca pojawi się na mapie punkt przejściowy (oznaczony małym, białym znacznikiem). Wybór i przesunięcie segmentu ścieżki zmieni się na tym odcinku trasy, a zaznaczenie i przesunięcie znacznika punktów trasy (w tym punktów początkowych i końcowych) spowoduje zmianę odnóg trasy biegnącej przez ten punkt.

Ponieważ wskazówki przeciągane są modyfikowane i renderowane po stronie klienta, możesz monitorować zdarzenie directions_changed w DirectionsRenderer, aby otrzymać powiadomienie, gdy użytkownik zmieni wyświetlane wskazówki.

Ten kod pokazuje podróż z Perth na zachodnim wybrzeżu Australii do wschodniego wybrzeża Australii. Kod monitoruje zdarzenie directions_changed, aby aktualizować łączny dystans na wszystkich etapach 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;

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

Fragment