Usługa wyznaczania trasy

Uwaga: biblioteki po stronie serwera

Ta strona opisuje usługę po stronie klienta dostępną w interfejsie Maps JavaScript API. Jeśli chcesz korzystać z usługi internetowej Map Google na swoim serwerze, zapoznaj się z informacjami o kliencie Node.js dla usług Map Google. Strona pod tym linkiem zawiera też informacje na temat klienta Java, Pythona i klienta Go dla usług Map Google.

Omówienie

Zobacz też dokumentację API JavaScript Map Google: Wskazówki

Wskazówki można obliczyć (za pomocą różnych środków transportu), korzystając z obiektu DirectionsService. Ten obiekt komunikuje się z usługą wyznaczania trasy w interfejsie API Map Google, która otrzymuje żądania wyznaczania trasy i zwraca efektywną ścieżkę. Czas podróży jest głównym czynnikiem optymalizowanym, ale brane są też pod uwagę inne czynniki, takie jak odległość, liczba zakrętów i wiele innych. Możesz je wyświetlić samodzielnie lub skorzystać z obiektu DirectionsRenderer.

Określając miejsce docelowe lub miejsce docelowe w żądaniu trasy dojazdu, możesz określić ciąg zapytania (np. „Chicago, IL” lub „Darwin, NSW, Australia”), wartość LatLng lub obiekt Place.

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

Pierwsze kroki

Zanim skorzystasz z usługi Trasa dojazdu w interfejsie Maps JavaScript API, najpierw włącz interfejs Route API w Google Cloud Console w tym samym projekcie, który został skonfigurowany dla 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 został skonfigurowany dla interfejsu API JavaScript Map Google, a następnie kliknij Otwórz.
3. Na liście interfejsów API w panelu znajdź Trasa API.
4. Jeśli na liście znajduje się 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, aby wyświetlić kartę Biblioteka. Możesz też wybrać w menu po lewej stronie Bibliotekę.
   2. Wyszukaj Trasa API, a potem wybierz ją z listy wyników.
   3. Wybierz WŁĄCZ. Gdy proces dobiegnie końca, na liście interfejsów API w panelu pojawi się interfejs Route API.

Ceny i zasady

Ceny

16 lipca 2018 roku wprowadziliśmy nowy, płatny abonament w Mapach, trasach i miejscach. Więcej informacji o nowych limitach cenowych i limitach wykorzystania usługi Trasa dojazdu w języku JavaScript znajdziesz w artykule Użycie i rozliczenia.

Zasady

Korzystanie z usługi Trasa musi być zgodne z zasadami opisanymi we wskazówkach interfejsu Route API.

Zapytania o trasę

Dostęp do usługi wyznaczania trasy jest asynchroniczny, ponieważ interfejs API Map Google musi wykonywać wywołania na serwerze zewnętrznym. Z tego powodu musisz przekazać metodę wywołania zwrotnego do wykonania po zakończeniu żądania. Ta metoda wywołania zwrotnego powinna przetworzyć wyniki. Pamiętaj, że usługa Trasa dojazdu może zwrócić więcej niż jeden możliwy plan podróży w formie oddzielnej tablicy routes[].

Aby użyć trasy w interfejsie Maps JavaScript API, utwórz obiekt typu DirectionsService i wywołaj DirectionsService.route() w celu zainicjowania żądania do usługi Trasa dojazdu, przekazując do niej literał obiektu DirectionsRequest zawierający warunki wejściowe i metodę wywołania zwrotnego, która zostanie wykonana 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
}

Te pola zostały omówione poniżej:

• origin (wymagany) określa lokalizację początkową, od której mają być wyznaczane trasy. Tę wartość można określić jako String (np. „Chicago, IL”), jako wartość LatLng lub jako 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 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 do miejsca.
• destination (wymagany) określa lokalizację, 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 trasy. Prawidłowe wartości znajdziesz poniżej w Trybach podróży.
• transitOptions (opcjonalny) określa wartości, które odnoszą się tylko do żądań, w których travelMode to TRANSIT. Prawidłowe wartości znajdziesz poniżej w sekcji Opcje transportu publicznego.
• drivingOptions (opcjonalny) określa wartości, które odnoszą się tylko do żądań, w których travelMode to DRIVING. Prawidłowe wartości znajdziesz poniżej w sekcji Opcje jazdy.

• 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 modyfikują trasę, kierując ją przez określone lokalizacje. Punkt pośredni jest określony jako literał obiektu z polami widocznymi poniżej:

  • location określa lokalizację punktu pośredniego jako obiekt LatLng, jako obiekt Place, lub jako String, który zostanie przekodowany.
  • stopover to wartość logiczna, która wskazuje, że punkt na trasie jest przystankiem na trasie, co skutkuje podzieleniem trasy na dwie trasy.

  Więcej informacji o punktach pośrednich znajdziesz poniżej w sekcji Używanie punktów pośrednich na trasach.

• optimizeWaypoints (opcjonalny) oznacza, że trasa korzystająca z podanego waypoints może być optymalizowana przez zmianę układu punktów w bardziej wydajnym trybie. Jeśli true usługa Trasa dojazdu zwróci zmienione waypoints pole w waypoint_order.(Więcej informacji znajdziesz w sekcji Korzystanie z punktów Way na trasie).
• Jeśli zasada jest ustawiona na true, atrybut provideRouteAlternatives (opcjonalny) określa, że w odpowiedzi usługa Trasa dojazdu może udostępnić więcej niż 1 inną 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 pośrednich.
• Parametr avoidFerries (opcjonalny), gdy ustawiona jest wartość true, wskazuje, że w miarę możliwości obliczone trasy powinny omijać promy.
• Parametr avoidHighways (opcjonalny), gdy jest ustawiony na true, wskazuje, że w miarę możliwości obliczone trasy powinny omijać główne autostrady.
• Wartość avoidTolls (opcjonalna) przy ustawieniu true wskazuje, że obliczone trasy powinny w miarę możliwości unikać dróg płatnych.
• region (opcjonalny) określa kod regionu podany w postaci 2-znakowego fragmentu „ccTLD” („domena najwyższego poziomu”). (Więcej informacji znajdziesz w sekcji Promowanie ze względu na region poniżej).

Uwaga: pole durationInTraffic zostało wycofane. Wcześniej zalecamy, aby klienci korzystający z Google Maps Platform Premium określali, czy wynik powinien uwzględniać czas trwania uwzględniający aktualne warunki na drodze. Zamiast tego użyj pola drivingOptions.

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

Podczas obliczania trasy musisz określić, który środek transportu ma być używany. Obecnie obsługiwane są te tryby podróży:

• DRIVING (Ustawienie domyślne) wskazuje standardowe wskazówki dojazdu określone w sieci drogowej.
• BICYCLING prosi o trasę rowerową przez ścieżki rowerowe i preferowane ulice.
• TRANSIT prosi o wskazówki dojazdu transportem publicznym.
• WALKING prosi o wyznaczenie trasy pieszej i chodnika.

Sprawdź Szczegóły pokrycia Google Maps Platform, aby dowiedzieć się, w jakim stopniu dany kraj obsługuje wskazówki dojazdu. Jeśli poprosisz o wyznaczenie trasy w regionie, w którym ten typ wskazówki będzie niedostępny, odpowiedź zwróci DirectionsStatus="ZERO_RESULTS".

Uwaga: trasa piesza może nie uwzględniać wyraźnych ścieżek pieszych, dlatego w polu DirectionsResult wyświetlą się ostrzeżenia. Te ostrzeżenia zawsze muszą być wyświetlane użytkownikowi. Jeśli nie używasz domyślnej właściwości DirectionsRenderer, odpowiadasz za to, żeby ostrzeżenia się wyświetlały.

Opcje transportu publicznego

Dostępne opcje dla wskazówek dojazdu różnią się w zależności od środka transportu. W takim przypadku opcje avoidHighways, avoidTolls, waypoints[] i optimizeWaypoints będą ignorowane. Opcje routingu właściwe dla transportu publicznego możesz określić za pomocą literału obiektu TransitOptions.

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

Literał obiektu TransitOptions zawiera te pola:

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

Te pola zostały omówione poniżej:

• arrivalTime (opcjonalny) określa żądany czas przyjazdu jako obiekt Date. Jeśli podasz godzinę przyjazdu, czas wyjazdu będzie ignorowany.
• departureTime (opcjonalny) określa żądany czas wyjazdu jako obiekt Date. Jeśli określisz właściwość arrivalTime, właściwość departureTime będzie ignorowana. Jeśli nie zostanie określona żadna wartość departureTime lub arrivalTime, zostanie ustawiona domyślna wartość (tj. bieżący czas).
• modes[] (opcjonalny) to tablica zawierająca co najmniej 1 literowy literał TransitMode. To pole może zostać uwzględnione tylko wtedy, gdy żądanie zawiera klucz interfejsu API. Każdy TransitMode określa preferowany środek transportu. Dozwolone są te wartości:
  • BUS wskazuje, że obliczona trasa powinna preferować podróżowanie autobusem.
  • RAIL wskazuje, że obliczona trasa powinna być wolna od pociągu, tramwaju, kolei miejskiej i metra.
  • SUBWAY wskazuje, że obliczona trasa powinna preferować podróż metrem.
  • TRAIN wskazuje, że obliczona trasa powinna być preferowana podróż pociągiem.
  • TRAM wskazuje, że obliczona trasa powinna korzystać z tramwaju lub kolei miejskiej.
• routingPreference (opcjonalny) określa preferencje dotyczące tras transportu publicznego. Przy użyciu tej opcji możesz odchylić zwrócone 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. Dozwolone są te wartości:
  • FEWER_TRANSFERS wskazuje, że obliczona trasa powinna preferować ograniczoną liczbę transferów.
  • LESS_WALKING wskazuje, że obliczona trasa powinna mieć ograniczoną liczbę spacerów.

Oto przykład DirectionsRequest według transportu publicznego:

{
  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ślać za pomocą obiektu DrivingOptions.

Obiekt DrivingOptions zawiera te pola:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Te pola zostały omówione poniżej:

• departureTime (wymagany do tego, aby literał obiektu drivingOptions był prawidłowy) określa wymagany czas wyjazdu jako obiekt Date. Wartość musi być ustawiona na aktualną godzinę lub w przyszłości. Nie może przypadać w przeszłości. (Aby zapewnić spójność informacji w strefach czasowych, interfejs API konwertuje wszystkie daty na czas UTC). Jeśli w przypadku klientów korzystających z abonamentu premium na Google Maps Platform umieścisz w żądaniu żądanie departureTime, interfejs API zwróci najlepszą trasę w zależności od spodziewanych warunków ruchu w momencie i w odpowiedzi uwzględni przewidywane czasy ruchu (duration_in_traffic). Jeśli nie podasz czasu wyjazdu (tj. jeśli żądanie nie zawiera informacji drivingOptions), zwracana trasa jest zwykle dobrą trasą bez uwzględniania warunków na drodze.
• trafficModel (opcjonalny) określa założenia, które należy wykorzystać podczas obliczania czasu w ruchu. To ustawienie wpływa na wartość zwracaną w polu duration_in_traffic w odpowiedzi, która zawiera przewidywany czas ruchu obliczony na podstawie średnich wartości historycznych. Domyślna wartość to bestguess. Dozwolone są te wartości:
  • bestguess (wartość domyślna) wskazuje, że zwrócony czas duration_in_traffic powinien być szacowanym czasem podróży, biorąc pod uwagę zarówno warunki historyczne, jak i aktualny ruch. Ruch na żywo staje się coraz bliższy tym bliżej departureTime.
  • pessimistic oznacza, że w większości dni zwracana wartość duration_in_traffic powinna być większa niż rzeczywista godzina, chociaż w niektórych przypadkach w szczególnych warunkach drogowych może dojść do przekroczenia tej wartości.
  • optimistic oznacza, że w większości dni zwrócone duration_in_traffic powinno być krótsze niż rzeczywisty czas podróży, choć w dni, w których szczególnie warunkowy ruch jest dobry, może być krótszy niż ta wartość.

Uwaga: jeśli czas wyjazdu nie został określony, wybór trasy i czasu trwania zależy od sieci drogowej i średniego natężenia ruchu niezależnego od czasu. Wyniki dla danego żądania mogą się różnić ze względu na zmiany w sieci dróg, zaktualizowane warunki natężenia ruchu i rozproszony charakter usługi. Wyniki mogą się też różnić w porównaniu do niemal identycznych tras w dowolnym momencie i z częstotliwością.

Uwaga: aby żądanie wykorzystywało aktualne informacje o ruchu drogowym, ustaw teraz wartość departureTime. Żądania korzystające z informacji o ruchu są rozliczane według wyższej stawki. Dowiedz się więcej o naliczaniu opłat za usługi Google Maps Platform.

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ątkowe wyrażone za pomocą współrzędnych geograficznych zamiast adresów zawsze domyślnie używają jednostek metrycznych). Na przykład trasa z „Chicago do Illinois” do „Toronto w stanie ONT” wyświetli wyniki w milach, a trasa odwrotna wyświetli wyniki w kilometrach. Ten system jednostek możesz zastąpić, ustawiając go bezpośrednio w żądaniu, używając jednej z tych wartości UnitSystem:

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

Uwaga: to ustawienie systemowe dotyczy tylko tekstu wyświetlanego użytkownikowi. Wyniki wyszukiwania zawierają również wartości odległości, które nie są widoczne dla użytkownika i zawsze są wyrażone w metrach.

Promowanie regionów według trasy dojazdu

Usługa wyznaczania trasy w interfejsie Google Maps API zwraca wyniki w domenie (regionie lub kraju), z której wczytywano tag JavaScript. (Większość użytkowników wczytuje https://maps.googleapis.com/, co powoduje ustawienie domeny domyślnej na Stany Zjednoczone). Jeśli wczytasz rozruch z innej obsługiwanej domeny, otrzymasz wyniki zależne od tej domeny. Na przykład wyszukiwanie hasła „San Francisco” może zwrócić inne wyniki niż aplikacje wczytujące https://maps.googleapis.com/ (Stany Zjednoczone) niż jedno wczytywanie w http://maps.google.es/ (Hiszpania).

Możesz też skonfigurować usługę Trasa dojazdu, aby za pomocą parametru region zwracały wyniki zależne od konkretnego regionu. Ten parametr pobiera kod regionu określony za pomocą dwuznakowego (nieliczbowego) subtagu regionu Unicode. W większości przypadków tagi te są bezpośrednio mapowane na wartości dwuznakowe ccTLD („domena najwyższego poziomu”) takie jak „uk” w „co.uk”. W niektórych przypadkach tag region obsługuje też kody ISO-3166-1, które czasami różnią się od wartości ccTLD (np. „GB” dla „Wielkiej Brytanii”).

Gdy używasz parametru region:

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

Promowanie regionów jest obsługiwane tylko w przypadku krajów i regionów obsługujących wskazówki dojazdu. Zajrzyj do szczegółowych informacji o zasięgu w Google Maps Platform, aby zobaczyć informacje o zasięgu międzynarodowym w usłudze Route API.

Renderowanie trasy

Inicjowanie żądania wskazówek dojazdu do DirectionsService za pomocą metody route() wymaga przekazania 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ę

DirectionsStatus może zwracać te wartości:

• OK wskazuje, że odpowiedź zawiera prawidłowy element DirectionsResult.
• NOT_FOUND wskazuje, że co najmniej 1 z lokalizacji określonych w punkcie początkowym żądania, celu podróży lub punkcie pośrednim nie udało się przetworzyć danych geograficznych.
• ZERO_RESULTS oznacza, że nie znaleziono trasy między miejscem wylotu a miejscem docelowym.
• Wartość MAX_WAYPOINTS_EXCEEDED wskazuje, że w polu DirectionsRequest podano za dużo pól DirectionsWaypoint. Informacje o limitach punktów na trasie znajdziesz poniżej.
• MAX_ROUTE_LENGTH_EXCEEDED oznacza, że żądana trasa jest zbyt długa i nie może być przetworzona. Ten błąd występuje w przypadku zwracania bardziej złożonych wskazówek. Spróbuj zmniejszyć liczbę punktów pośrednich, zakrętów lub instrukcji.
• Wartość INVALID_REQUEST wskazuje, że podana wartość DirectionsRequest jest nieprawidłowa. Najczęstsze przyczyny tego kodu błędu to żądania, które nie zawierają punktu początkowego lub miejsca docelowego, albo żądania transportu publicznego zawierające punkty pośrednie.
• OVER_QUERY_LIMIT oznacza, że w danym okresie strona internetowa wysłała za dużo żądań.
• REQUEST_DENIED wskazuje, że strona nie może korzystać z usługi wskazówek dojazdu.
• UNKNOWN_ERROR oznacza, że nie można przetworzyć żądania trasy z powodu błędu serwera. Jeśli spróbujesz ponownie, prośba może zostać zrealizowana.

Musisz się upewnić, że zapytanie o wskazówki dojazdu zwróci poprawne wyniki, zanim przetworzysz wynik.

Wyświetlanie trasy dojazdu

DirectionsResult zawiera wynik zapytania o trasę dojazdu, który możesz obsłużyć samodzielnie lub przekazać do obiektu DirectionsRenderer, który automatycznie może wyświetlić 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 go DirectionsResult jak wspomniano powyżej. Renderer to MVCObject, więc automatycznie wykrywa zmiany w jego właściwościach i aktualizuje mapę, gdy zmieni się powiązana z nią trasa.

Poniższy przykład pokazuje obliczanie trasy między 2 lokalizacjami na drodze nr 66, gdzie miejsce wyjazdu i miejsce docelowe są określane przez wartości "start" i "end" na listach. DirectionsRenderer obsługuje wyświetlanie linii łamanej między wybranymi lokalizacjami, a także w stosownych przypadkach położenie znaczników na punkcie początkowym, docelowym i w dowolnych punktach pośrednim.

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 trasę z wykorzystaniem różnych środków transportu między Haight-Ashbury do Ocean Beach w San Francisco w stanie 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 wyświetla linię łamaną i wszystkie powiązane znaczniki, ale może też wyświetlać tekstowe wskazówki dojazdu jako serię kroków. Aby to zrobić, wywołaj metodę setPanel() na urządzeniu DirectionsRenderer, przekazując <div>, w którym pojawią się te informacje. Dzięki temu upewnisz się, że wyświetlane są odpowiednie informacje na temat praw autorskich oraz wszelkie ostrzeżenia, które mogą być powiązane z wynikiem.

Wskazówki tekstowe będą dostarczane przez preferowany język przeglądarki lub język określony podczas wczytywania kodu JavaScript interfejsu API za pomocą parametru language. (Więcej informacji znajdziesz w sekcji Lokalizacja). W przypadku wskazówek dojazdu transportem publicznym czas wyświetli się w strefie czasowej danego przystanku.

Poniższy przykład jest taki sam jak powyżej, ale zawiera panel <div>, w którym wyświetlane są 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 RouteResult

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

• geocoded_waypoints[] zawiera tablicę obiektów DirectionsGeocodedWaypoint. Każdy z nich zawiera informacje o geokodowaniu źródła, miejsca docelowego i punktów na trasie.
• routes[] zawiera tablicę obiektów DirectionsRoute. Każda trasa wskazuje trasę z punktu początkowego do miejsca docelowego określonego w parametrze DirectionsRequest. Zazwyczaj w przypadku danego żądania zwracana jest tylko 1 trasa, chyba że w polu provideRouteAlternatives ustawiono wartość true, w której może zostać zwróconych wiele tras.

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

Punkty pośrednie Waypoint

DirectionsGeocodedWaypoint zawiera szczegółowe informacje na temat geokodowania źródeł, miejsc docelowych i punktów pośrednich.

DirectionsGeocodedWaypoint to literał obiektu z tymi polami:

• geocoder_status wskazuje kod stanu wynikający z operacji geokodowania. To pole może zawierać podane niżej wartości.
  • "OK" oznacza, że nie wystąpiły żadne błędy. Adres został przeanalizowany, a przynajmniej jeden został zwrócony.
  • "ZERO_RESULTS" oznacza, że przetwarzanie danych geograficznych zakończyło się powodzeniem, ale nie zwrócono żadnych wyników. Może się tak zdarzyć, jeśli koder został przekazany do nieistniejącego address.

• partial_match wskazuje, że geokoder nie zwrócił ściśle dopasowania do pierwotnego żądania, chociaż udało się dopasować część żądanego adresu. Możesz sprawdzić pierwotne żądanie dotyczące literówek lub niepełny adres.

  Częściowo pasujące adresy występują najczęściej w przypadku adresów, które nie istnieją w lokalizacji podanej w żądaniu. Częściowe dopasowania mogą zostać zwrócone także wtedy, gdy żądanie pasuje do co najmniej 2 lokalizacji w tym samym miejscu. Na przykład „Hillpar St, Bristol, UK” zwróci częściowe dopasowanie adresów na ulicy Helena i ul. Kochanowskiego. Jeśli żądanie zawiera nieprawidłowy komponent adresu, usługa geokodowania może zasugerować alternatywny adres. Sugestie uruchamiane w ten sposób również będą oznaczane jako częściowe dopasowanie.

• place_id to unikalny identyfikator miejsca, którego można używać z innymi interfejsami API Google. Możesz na przykład użyć place_id z biblioteką Google Places API, aby uzyskać informacje o lokalnej firmie, takie jak numer telefonu, godziny otwarcia, opinie użytkowników itp. 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 cechy zwróconego w wyniku. Na przykład geokodowanie „Chicago” zwraca „lokalność”, które wskazuje, że „Chicago” jest miastem, a także „polityczne”, co wskazuje, że jest to podmiot polityczny.

Trasy dojazdu

Uwaga: starszy obiekt DirectionsTrip zmienił nazwę na DirectionsRoute. Pamiętaj, że teraz trasa obejmuje całą ścieżkę od początku do końca, a nie tylko jeden etap podróży nadrzędnej.

DirectionsRoute zawiera 1 wynik z podanego źródła i miejsca docelowego. Trasa może się składać z co najmniej 1 stopu (typu DirectionsLeg) w zależności od tego, czy zostały określone punkty pośrednie. Trasa zawiera również informacje o prawach autorskich i ostrzeżeniach, które muszą być wyświetlane użytkownikowi razem z informacjami o routingu.

DirectionsRoute to literał obiektu z tymi polami:

• legs[] zawiera tablicę obiektów DirectionsLeg, a każdy z nich zawiera informacje o dowolnym odcinku trasy z dwóch lokalizacji na danej trasie. Dla każdego wymienionego punktu końcowego lub miejsca docelowego będzie utworzona osobna noga. (Trasa bez punktów pośrednich będzie zawierać dokładnie jeden obiekt DirectionsLeg). Każdy etap składa się z serii serii DirectionStep.
• waypoint_order zawiera tablicę wskazującą kolejność punktów na drodze do obliczonej trasy. Ta tablica może zawierać zmienioną kolejność, jeśli pole DirectionsRequest zostało przekazane optimizeWaypoints: true.
• overview_path zawiera tablicę LatLng z przybliżoną (wygładzoną) ścieżką wyznaczonych tras.
• overview_polyline zawiera 1 obiekt points, który zawiera zakodowaną linię łamaną trasy. Ta linia łamana to przybliżona (wygładzona) ścieżka wyznaczonych wyników.
• bounds zawiera LatLngBounds, który wskazuje granice łamanej linii biegu na tej trasie.
• copyrights zawiera tekst dotyczący praw autorskich, który ma być wyświetlany na tej trasie.
  Uwaga: jeśli nie używasz podanego obiektu DirectionsRenderer, musisz samodzielnie przetworzyć i wyświetlić te informacje.
• warnings[] zawiera tablicę ostrzeżeń, które mogą być wyświetlane podczas wyświetlania tych wskazówek. Jeśli nie używasz podanego obiektu DirectionsRenderer, ostrzeżenia musisz wyświetlać i wyświetlać samodzielnie.
• fare zawiera łączną cenę (tj. łą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 cenie dla wszystkich etapów transportu publicznego. Obejmują one:
  • currency: kod waluty w formacie ISO 4217 wskazujący walutę, w której jest podana kwota.
  • value: łączna kwota opłaty w walucie określonej powyżej.

Nogi

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

DirectionsLeg określa jeden etap podróży od punktu początkowego do miejsca docelowego na obliczonej trasie. W przypadku tras, które nie mają żadnych punktów pośrednich, trasa będzie się składać z jednego „dnia”, ale w przypadku tras, które definiują co najmniej jeden punkt pośredni, trasa będzie się składać z co najmniej 1 stopnia odpowiadającego konkretnym etapom podróży.

DirectionsLeg to literał obiektu z tymi polami:

• steps[] zawiera tablicę DirectionsStep obiektów oznaczających informacje o każdym odrębnym etapie kroku.

• distance wskazuje całkowitą odległość pokonaną przez ten etap, jako obiekt Distance w tej postaci:

  • value wskazuje odległość w metrach
  • text zawiera dystans, który jest domyślnie wyświetlany w jednostkach użytych w punkcie początkowym. Na przykład mile będą używane dla dowolnego miejsca docelowego w Stanach Zjednoczonych. Możesz zastąpić ten system jednostek, ustawiając UnitSystem w pierwotnym zapytaniu. Pamiętaj, że niezależnie od używanego systemu 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 całkowity czas trwania tego kroku jako obiekt Duration tego formularza:

  • 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 etapu, 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. Oznacza to, że nie uwzględnia ona punktów pośrednich, gdzie stopover to true.
  • Prośba jest przeznaczona specjalnie dla wskazówek dojazdu – mode ma wartość driving.
  • departureTime jest uwzględnione w polu drivingOptions w żądaniu.
  • Informacje o warunkach na drodze są dostępne dla wybranej trasy.

  duration_in_traffic zawiera te pola:

  • value wskazuje czas trwania w sekundach.
  • text zawiera czytelny dla człowieka czas trwania.
• arrival_time zawiera szacowany czas dotarcia na ten etap. Ta właściwość jest zwracana tylko w przypadku trasy dojazdu transportem publicznym. Wynik jest zwracany jako obiekt Time z 3 właściwościami:
  • value czas określony jako obiekt JavaScript Date.
  • text godzina określona jako ciąg znaków. Czas jest wyświetlany w strefie czasowej przystanku.
  • time_zone zawiera strefę czasową tej stacji. Wartość jest nazwą strefy czasowej zdefiniowanej w bazie danych stref czasowych IANA, np. „Ameryka/Nowy_Jork”.
• departure_time zawiera szacowany czas odjazdu tego kroku, podany jako obiekt Time. departure_time jest dostępny tylko w przypadku wskazówek dojazdu transportem publicznym.
• start_location zawiera LatLng punktu początkowego tego kroku. Usługa internetowa Trasa dojazdu oblicza wskazówki dojazdu między lokalizacjami, korzystając z najbliższej opcji transportu (zwykle drogi) na początku i końcu, dlatego start_location może się różnić od podanego punktu początkowego, jeśli np. droga nie znajduje się blisko punktu początkowego.
• end_location zawiera LatLng miejsca docelowego tego kroku. DirectionsService oblicza wskazówki dojazdu między lokalizacjami, korzystając z najbardziej aktualnej opcji transportu (zwykle drogi) na początku i końcu trasy, dlatego end_location może się różnić od podanego miejsca docelowego tego kroku, jeśli na przykład droga nie jest w pobliżu celu.
• start_address zawiera czytelny dla człowieka adres (zwykle adres) na początku tego kroku.
  
  Te treści są przeznaczone do odczytu bez zmian. Nie przetwarzaj automatycznie sformatowanego adresu.
• end_address zawiera czytelny dla człowieka adres (zwykle adres) końca tego etapu.
  
  Te treści są przeznaczone do odczytu bez zmian. Nie przetwarzaj automatycznie sformatowanego adresu.

Trasa dojazdu

DirectionsStep to najbardziej atomowa jednostka trasy. Zawiera jeden krok opisujący konkretną, jedną instrukcję na trasie. Na przykład „Skręć w lewo na 4. St.” Ten krok nie tylko opisuje instrukcje, ale zawiera też informacje o odległości i czasie trwania dotyczące tego kroku. Na przykład krok oznaczony jako „Scal się w I-80 West” może obejmować czas „37 mil” i „40 minut”, który wskazuje, że kolejny krok to 37 mili/40 minut.

Podczas korzystania z usługi Trasa do wyszukiwania wskazówek dojazdu transportem publicznym tablica kroków będzie zawierać dodatkowe szczegółowe informacje o transporcie publicznym w formie obiektu transit. Jeśli wskazówki dojazdu obejmują wiele środków transportu, szczegółowe tablice pojawią się w tablicy steps[] na trasie pieszej lub samochodowej. Na przykład etap spaceru będzie zawierał wskazówki z punktu początkowego i końcowego: „Pies do innych ulic przy ul. Kowalskiej”. Ten krok zawiera szczegółowe wskazówki dla danej trasy w tablicy steps[], takie jak: „Kieruj się na północny zachód”, „Skręć w lewo w Arelious Walker” i „Skręć w lewo przy Innes Ave”.

DirectionsStep to literał obiektu z tymi polami:

• instructions zawiera instrukcje dotyczące tego kroku w ciągu tekstowym.
• distance zawiera odległość pokonaną w tym kroku do następnego kroku jako obiekt Distance. Zobacz opis w sekcji DirectionsLeg powyżej. Jeśli odległość jest nieznana, to pole może być nieokreślone.
• duration zawiera szacowany czas potrzebny do wykonania tego kroku, aż do następnego kroku, jako obiekt Duration. Zobacz opis w sekcji DirectionsLeg powyżej. Jeśli czas trwania jest nieznany, to pole może być nieokreślone.
• start_location zawiera geograficznie LatLng punktu początkowego tego kroku.
• end_location zawiera LatLng punktu końcowego tego kroku.
• polyline zawiera 1 obiekt points zawierający zakodowaną linię łamaną kroku. Ta linia łamana to przybliżona (wygładzona) ścieżka kroku.
• steps[] literał obiektu DirectionsStep zawierający szczegółowe wskazówki dotyczące trasy pieszej lub samochodowej na trasie dojazdu transportem publicznym. Kroki podrzędne są dostępne tylko w przypadku tras dojazdu transportem publicznym.
• travel_mode zawiera TravelMode używane w tym kroku. Trasa dojazdu transportem publicznym może obejmować połączenie wskazówek dojazdu pieszo i transportem publicznym.
• path zawiera tablicę LatLngs z opisem przebiegu tego kroku.
• transit zawiera informacje o transporcie publicznym, takie jak czas 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 w przypadku innych środków transportu. Te dodatkowe właściwości są ujawniane za pomocą obiektu TransitDetails, który jest zwracany jako właściwość DirectionsStep. Z obiektu TransitDetails uzyskasz dostęp do dodatkowych informacji o obiektach TransitStop, TransitLine, TransitAgency i VehicleType w sposób opisany poniżej.

Szczegóły transportu publicznego

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

• arrival_stop zawiera obiekt TransitStop reprezentujący przystanek/przystanek z tymi właściwościami:
  • name nazwę stacji transportu publicznego. np. „Union Square”.
  • location lokalizację stacji/przystanku transportu publicznego wyrażoną 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 godzina określona jako ciąg znaków. Czas jest wyświetlany w strefie czasowej przystanku.
  • time_zone zawiera strefę czasową tej stacji. Wartość jest nazwą strefy czasowej zdefiniowanej w bazie danych stref czasowych IANA, np. „Ameryka/Nowy_Jork”.
• departure_time zawiera godzinę wyjazdu określoną jako obiekt Time.
• headsign określa kierunek, w którym porusza się ta linia, ponieważ jest oznaczony na pojeździe lub przy postoju. Będzie to często stacja docelowa.
• headway, jeśli ta opcja jest dostępna, określa oczekiwaną liczbę sekund między odjazdami z tego samego przystanku. Jeśli na przykład wartość headway wynosi 600, możesz oczekiwać 10 minut, jeśli nie uda Ci się zabrać autobusu.
• line zawiera literał obiektu TransitLine, który zawiera informacje o linii transportu publicznego użytej w tym kroku. TransitLine zawiera nazwę i operator wiersza oraz inne właściwości opisane w dokumentacji referencyjnej TransitLine.
• num_stops zawiera liczbę kroków w tym kroku. Obejmuje przystanek przylotu, ale nie przystanek docelowy. Jeśli na przykład wskazówki dojazdu obejmują postój na przystanku A, przejście przez przystanki B i C oraz dotrzesz do przystanku D, num_stops zwróci wartość 3.

Linia komunikacyjna

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

• name zawiera pełną nazwę tej linii transportu publicznego. „ul. Emilii Plater 53” lub „ul. Polna 13”.
• short_name zawiera krótką nazwę tego wiersza. Zazwyczaj jest to numer wiersza, np. „2” lub „M14”.
• agencies to tablica zawierająca pojedynczy obiekt TransitAgency. Obiekt TransitAgency zawiera informacje o operatorze tej linii, w tym następujące właściwości:
  • name zawiera nazwę przewoźnika.
  • phone zawiera numer telefonu przewoźnika.
  • url zawiera adres URL przewoźnika.

  Uwaga: jeśli ręcznie renderujesz trasę dojazdu transportem publicznym zamiast obiektu DirectionsRenderer, musisz wyświetlać 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 danym 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, takie jak system metra w Nowym Jorku, mają ikony specjalnie dla tej linii.
• color zawiera kolor, który jest powszechnie używany na szyldach transportu publicznego. Kolor zostanie podany w postaci szesnastkowej, np. #FF0033.
• text_color zawiera kolor tekstu używanego zwykle do oznaczenia tej linii. Kolor zostanie podany jako ciąg szesnastkowy.
• vehicle zawiera obiekt Vehicle, który zawiera te właściwości:
  • name zawiera nazwę pojazdu w tym wierszu. np. „Metro”.
  • type zawiera typ pojazdu używany w tej linii. Pełną listę obsługiwanych wartości znajdziesz w dokumentacji typu pojazdu.
  • icon zawiera adres URL ikony 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	Pociąg.
VehicleType.METRO_RAIL	Transportem publicznym.
VehicleType.SUBWAY	Metro.
VehicleType.TRAM	Nad ziemią.
VehicleType.MONORAIL	Kolej jednoszynowa.
VehicleType.HEAVY_RAIL	Ciężarowa linia kolejowa.
VehicleType.COMMUTER_TRAIN	Kolej podmiejska.
VehicleType.HIGH_SPEED_TRAIN	Pociąg o dużej prędkości.
VehicleType.BUS	Autobus.
VehicleType.INTERCITY_BUS	Autobus dalekobieżny.
VehicleType.TROLLEYBUS	Trolejbus.
VehicleType.SHARE_TAXI	Taksówka z możliwością podróżowania to rodzaj autobusu, który można zawieźć i odebrać pasażerów w dowolnym miejscu na trasie.
VehicleType.FERRY	Prom.
VehicleType.CABLE_CAR	Pojazd korzystający z kabla, zwykle na ziemi. Kolejki linowe mogą być typu VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT	Kolejka linowa.
VehicleType.FUNICULAR	Pojazd naciągnięty po stromym zboczu za pomocą kabla. Zwykle kolejka linowo-terenowa składa się z 2 samochodów, z których każdy działa jako przeciwstawny.
VehicleType.OTHER	Wszystkie inne pojazdy będą zwracać ten typ.

Sprawdzanie wyników wyszukiwania wskazówek dojazdu

Komponenty DirectionsResults – DirectionsRoute, DirectionsLeg, DirectionsStep i TransitDetails – mogą być sprawdzane i używane podczas analizowania odpowiedzi na trasę.

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

Poniższy przykład przedstawia trasę pieszą do niektórych atrakcji turystycznych w Nowym Jorku. Sprawdzamy trasę DirectionsStep, aby dodać znaczniki do każdego kroku, i dodamy informacje do obiektu InfoWindow z tekstem instrukcji dla tego kroku.

Uwaga: obliczamy trasę pieszą, więc wszelkie ostrzeżenia wyświetlamy użytkownikowi w oddzielnym 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

Używanie punktów pośrednich na trasach

Uwaga: opłaty za więcej niż 10 punktów albo ich optymalizację są naliczane według wyższej stawki. Dowiedz się więcej o naliczaniu opłat za usługi Google Maps Platform.

Jak wspomnieliśmy w sekcji Wyznaczenie trasy, możesz też wyznaczyć punkty pośrednie typu (DirectionsWaypoint) podczas obliczania trasy w usłudze Trasa dojazdu pieszo, rowerem lub samochodem. Punkty pośrednie nie są dostępne do wyznaczania trasy dojazdu transportem publicznym. Punkty pośrednie pozwalają obliczać trasy przez dodatkowe lokalizacje – w takim przypadku zwracana trasa przechodzi przez określone punkty pośrednie.

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

• location (wymagane) to adres punktu pośredniego.
• stopover (opcjonalnie) wskazuje, czy ten punkt pośredni to faktyczny przystanek na trasie (true), czy tylko trasa przez wskazaną lokalizację (false). Przystanki są domyślnie ustawione na true.

Uwaga: ustawienie wartości stopover na false powoduje, że wskazówki dojazdu są bardzo ścisłe w interpretacji punktu końcowego. Może to spowodować poważne objazdy na trasie lub ZERO_RESULTS w kodzie stanu odpowiedzi, jeśli usługa wyznaczania trasy nie może utworzyć trasy z tego punktu.

Domyślnie usługa wyznaczania trasy oblicza trasę przez podane punkty pośrednie w określonej kolejności. Opcjonalnie możesz przekazać optimizeWaypoints: true w DirectionsRequest, aby umożliwić usłudze Trasa dojazdu zoptymalizowanie podanej trasy przez zmianę kolejności punktów na liście w bardziej wydajnym trybie. Ta optymalizacja dotyczy problemu podróżnego sprzedawcy. Czas podróży jest głównym czynnikiem optymalizacji, ale przy podejmowaniu decyzji, która trasa jest najskuteczniejsza, uwzględniamy też inne czynniki, takie jak odległość, liczba zakrętów i wiele innych. Aby można było zoptymalizować trasę, wszystkie punkty pośrednie muszą być przesiadkami.

Jeśli polecisz usłudze Trasa dojazdu, aby zoptymalizuje ona kolejność punktów na trasie, ich kolejność zostanie zwrócona w polu waypoint_order w obiekcie DirectionsResult.

Poniższy przykład służy do obliczania tras przełajowych w Stanach Zjednoczonych na podstawie różnych punktów startowych, punktów końcowych i punktów pośrednich. Aby wybrać wiele punktów pośrednich, podczas ich wybierania naciśnij Ctrl. Pamiętaj, że sprawdzamy routes.start_address i routes.end_address, aby udostępnić tekst z początkiem i końcem 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

Uwaga: przeczytaj przewodnik na temat używania skryptów TypeScript i Map Google.

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 Waypoint

Obowiązują te ograniczenia użytkowania:

• Maksymalna liczba punktów pośrednich dozwolonych podczas korzystania z usługi Trasa dojazdu w interfejsie Maps JavaScript API to 25 plus punkt początkowy i miejsce docelowe. Limity są takie same jak w przypadku usługi internetowej Route API.
• W przypadku usługi internetowej Route API klienci mogą mieć 25 punktów pośrednich, wraz z miejscem docelowym i miejscem docelowym.
• Klienci korzystający z abonamentu Premium w Google Maps Platform mogą mieć 25 punktów pośrednich, wraz z miejscem docelowym i miejscem docelowym.
• Punkty pośrednie nie są obsługiwane w przypadku trasy dojazdu transportem publicznym.

Trasa dojazdu

Użytkownicy mogą dynamicznie zmieniać wskazówki piesze, rowerowe lub piesze wyświetlane za pomocą DirectionsRenderer, jeśli są przeciągane. Dzięki temu mogą wybierać i zmieniać trasy, klikając i przeciągając znalezione na mapie ścieżki. Aby określić, czy wyświetlacz mechanizmu renderowania umożliwia przeciąganie wskazówek, ustaw właściwość draggable na true. Nie można przeciągać wskazówek dojazdu transportem publicznym.

Jeśli wskazówki można przeciągać, użytkownik może wybrać dowolny punkt na ścieżce (lub punktu pośredniego) renderowanego wyniku i przenieść wskazany komponent do nowej lokalizacji. DirectionsRenderer zaktualizuje się dynamicznie, pokazując zmodyfikowaną ścieżkę. Po premierze do mapy zostanie dodany punkt przejściowy (na co wskazuje mały biały znacznik). Wybranie i przeniesienie segmentu ścieżki spowoduje zmianę tego zakrętu trasy, a wybranie i przeniesienie znacznika punktu na drodze (w tym punktu początkowego i końcowego) wpłynie na nogi trasy przechodzącej przez ten punkt.

Możliwość przeciągania trasy jest modyfikowana i renderowana po stronie klienta, dlatego możesz monitorować i obsługiwać zdarzenie directions_changed na DirectionsRenderer, aby otrzymywać powiadomienia, gdy użytkownik zmieni wyświetlane wskazówki.

Poniższy kod pokazuje podróż z Perth na zachodnim wybrzeżu Australii do Sydney na wschodnim wybrzeżu. Kod monitoruje zdarzenie directions_changed, aby aktualizować łączny dystans na wszystkich etapach przebiegu.

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

Uwaga: przeczytaj przewodnik na temat używania skryptów TypeScript i Map Google.

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

Uwaga: kod JavaScript został skompilowany z fragmentem kodu TypeScript.

Zobacz przykład

Fragment

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell