Usługa wyznaczania trasy

Przegląd

Wskazówki można obliczać (korzystając z 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 odbiera zapytania o trasę i zwraca efektywną ścieżkę. Czas podróży jest głównym czynnikiem zoptymalizowanym, ale uwzględniamy też 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 (na przykład „Chicago, IL” lub „Darwin, NSW, Australia”), wartość LatLng lub obiekt Place.

Usługa wyznaczania trasy może zwrócić wieloczęściowe wskazówki dojazdu za pomocą serii punktów pośrednich. Trasa dojazdu jest wyświetlana jako linia łamana na mapie lub dodatkowo jako seria tekstu w elemencie <div> (np. „Skręć w prawo do mostu Williamsburga”).

Pierwsze kroki

Zanim zaczniesz korzystać z usługi Trasa dojazdu w interfejsie API JavaScript Map, sprawdź, czy jest on włączony w Google Cloud Console w tym samym projekcie, który masz 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 skonfigurowany dla interfejsu Maps JavaScript API i kliknij Otwórz.
  3. Na liście interfejsów API w panelu znajdź Route API.
  4. Jeśli interfejs API jest widoczny na liście, nie musisz nic robić. Jeśli interfejsu API nie ma na liście, włącz go:
    1. U góry strony wybierz WŁĄCZ API, aby wyświetlić kartę Biblioteka. W menu po lewej stronie możesz też wybrać Biblioteka.
    2. Wyszukaj Interfejs API wyznaczania trasy, a następnie wybierz go z listy wyników.
    3. Kliknij WŁĄCZ. Po zakończeniu tego procesu na liście interfejsów API w panelu pojawi się interfejs API wyznaczania trasy.

Ceny i zasady

Ceny

16 lipca 2018 roku wprowadziliśmy nowy abonament, w którym płaci się według wykorzystania. Więcej informacji o nowych cenach i limitach wykorzystania związanych z korzystaniem z usługi JavaScript Wskazówki znajdziesz w artykule o używaniu i płatnościach.

Zasady

Korzystanie z usługi Trasa dojazdu musi być zgodne z zasadami opisanymi w interfejsie Trasa 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 musisz przekazać metodę wywołania zwrotnego, aby wykonać żądanie. Ta metoda wywołania zwrotnego powinna przetworzyć wyniki. Pamiętaj, że usługa Trasa dojazdu może zwrócić więcej niż 1 możliwy plan podróży jako tablicę oddzielnego routes[].

Aby użyć trasy w interfejsie Maps JavaScript API, utwórz obiekt typu DirectionsService i wywołaj DirectionsService.route() do usługi wyznaczania trasy, przekazując do niego literał obiektu DirectionsRequest zawierający warunki wejściowe i metodę wywołania zwrotnego, które zostaną wykonane 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 objaśniamy poniżej.

  • origin (wymagany) określa lokalizację początkową, z której należy wyznaczyć wskazówki dojazdu. Tę wartość można podać jako obiekt 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 miejsc i autouzupełniania miejsc w interfejsie API JavaScript Map Google. Przykłady 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 do obliczania wskazówek dojazdu. Prawidłowe wartości podano poniżej w Trybach podróży.
  • transitOptions (opcjonalny) określa wartości, które mają zastosowanie tylko do żądań, gdzie travelMode to TRANSIT. Prawidłowe wartości są opisane poniżej w sekcji Opcje transportu publicznego.
  • drivingOptions (opcjonalny) określa wartości, które mają zastosowanie tylko do żądań, gdzie travelMode to DRIVING. Prawidłowe wartości znajdziesz poniżej w sekcji Opcje jazdy.

  • unitSystem (opcjonalny) określa, którego systemu jednostek używać podczas wyświetlania wyników. Prawidłowe wartości podano poniżej w sekcji Systemy jednostek.

  • waypoints[] (opcjonalny) określa tablicę DirectionsWaypoint. Punkty pośrednie modyfikują trasę, wyznaczając trasę 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 LatLng, jako obiekt Place lub jako String, który zostanie przekodowany.
    • stopover to wartość logiczna, która wskazuje, że punkt drogi jest zatrzymywany na trasie, co skutkuje podzieleniem trasy na 2 trasy.

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

  • Parametr optimizeWaypoints (opcjonalny) wskazuje, że trasa korzystająca z podanego waypoints może być optymalizowana przez zmianę kolejności punktów w sposób bardziej wydajny. Jeśli true, usługa wyznaczania trasy zwróci waypoints zmienione miejsce w polu waypoint_order. Więcej informacji znajdziesz poniżej w sekcji Korzystanie z punktów pośrednich w trasach.
  • Jeśli zasada provideRouteAlternatives (opcjonalna) jest ustawiona na true, usługa wyznaczania trasy może udostępniać w odpowiedzi więcej niż jedną trasę alternatywną. 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 obliczone trasy powinny w miarę możliwości unikać promów.
  • Parametr avoidHighways (opcjonalny), gdy ustawiona jest wartość true, wskazuje, że obliczone trasy powinny w miarę możliwości omijać główne drogi.
  • avoidTolls (opcjonalnie) 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 jako ccTLD („domena najwyższego poziomu”) o wartości dwuznakowej. Więcej informacji znajdziesz poniżej w sekcji Promowanie ze względu na region.

Poniżej znajdziesz przykładowy tekst 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 wyznaczania trasy musisz określić środek transportu, którego chcesz użyć. Obecnie obsługiwane są te tryby podróży:

  • DRIVING (wartość domyślna) wskazuje standardowe wskazówki dojazdu z użyciem sieci drogowej.
  • BICYCLING prosi o trasę rowerową ścieżkami rowerowymi i preferowanymi ulicami.
  • TRANSIT prosi o wskazówki dojazdu transportem publicznym.
  • WALKING prosi o wyznaczenie trasy pieszej lub chodnika.

Zapoznaj się ze szczegółowymi informacjami o zasięgu Google Maps Platform, aby dowiedzieć się, w jakim stopniu kraj obsługuje wskazówki dojazdu. Jeśli zażądasz trasy dojazdu w regionie, w którym ten typ wskazówek jest niedostępny, odpowiedź zwróci DirectionsStatus="ZERO_RESULTS".

Uwaga: trasa piesza może nie uwzględniać wyraźnych ścieżek pieszych, więc trasa piesza będzie zwracać ostrzeżenia w DirectionsResult. Te ostrzeżenia muszą być zawsze wyświetlane użytkownikowi. Jeśli nie używasz domyślnej właściwości DirectionsRenderer, odpowiadasz za wyświetlanie ostrzeżeń.

Opcje transportu publicznego

Dostępne opcje zapytania o trasę różnią się w zależności od środka transportu. W przypadku żądania wyznaczania trasy 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ą zależne od czasu. Trasa będzie wyświetlana tylko w przyszłości.

Literał obiektu TransitOptions zawiera te pola:

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

Te pola objaśniamy 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 arrivalTime, właściwość departureTime będzie ignorowana. Jeśli nie określono wartości właściwości departureTime ani arrivalTime, przyjmuje się wartość domyślną (obecnie).
  • modes[] (opcjonalnie) to tablica zawierająca co najmniej 1 literowy obiekt obiektu TransitMode. To pole można uwzględnić 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óż autobusem.
    • RAIL wskazuje, że obliczona trasa powinna korzystać z pociągu, tramwaju, kolei miejskiej i metra.
    • SUBWAY wskazuje, że obliczona trasa powinna podróżować metrem.
    • TRAIN wskazuje, że obliczona trasa powinna być preferowana w pociągu.
    • TRAM wskazuje, że obliczona trasa powinna korzystać z tramwaju i kolejki.
  • routingPreference (opcjonalny) określa ustawienia tras transportu publicznego. Korzystając z tej opcji, możesz zwiększyć ten status, 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 preferować ograniczoną liczbę kroków.

Poniżej znajdziesz przykładowy kod DirectionsRequest 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ślić za pomocą obiektu DrivingOptions.

Obiekt DrivingOptions zawiera te pola:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Te pola objaśniamy poniżej.

  • departureTime (wymagany, aby literał obiektu drivingOptions był prawidłowy) określa żądany czas wyjazdu jako obiekt Date. Wartość musi być ustawiona na aktualną godzinę lub godzinę w przyszłości. Nie może to być przeszłość. (Aby zapewnić spójność obsługi we wszystkich strefach czasowych, interfejs API konwertuje wszystkie daty na czas UTC). Jeśli w żądaniu uwzględnisz w żądaniu departureTime z abonamentu Premium w Google Maps Platform, interfejs API zwróci najlepszą trasę ze względu na oczekiwane warunki w danym momencie i w odpowiedzi uwzględni przewidywany czas ruchu (duration_in_traffic). Jeśli nie podasz godziny wyjazdu (tzn. żądanie nie będzie zawierać danych drivingOptions), zwracana trasa będzie ogólnie dobrą trasą bez uwzględniania warunków na drodze.
  • trafficModel (opcjonalny) określa założenia, które należy zastosować podczas obliczania czasu ruchu. To ustawienie wpływa na wartość zwracaną w polu duration_in_traffic w odpowiedzi. Zawiera ona przewidywany czas 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 duration_in_traffic powinien być najlepszym oszacowaniem czasu podróży, biorąc pod uwagę zarówno informacje o warunkach zarówno historycznych, jak i natężenia ruchu. Ruch na żywo staje się ważniejszy, gdy departureTime jest bliżej.
    • Parametr pessimistic wskazuje, że zwrócona wartość duration_in_traffic powinna w większości dni być dłuższa niż rzeczywista podróż, chociaż w przypadku dni, w których natężenie ruchu jest wyjątkowo wysokie, może dojść do przekroczenia tej wartości.
    • Parametr optimistic wskazuje, że zwracany czas (duration_in_traffic) powinien być krótszy niż rzeczywisty czas podróży, ale w przypadku dni, w których warunki na drodze są wyjątkowo dobre, może być krótszy niż ten czas.

Oto przykład DirectionsRequest z trasą dojazdu:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Systemy jednostek

Domyślnie wskazówki są obliczane i wyświetlane zgodnie z systemem jednostek w kraju lub regionie punktu początkowego. (Uwaga: źródła będą podawane za pomocą współrzędnych szerokości i długości geograficznej, a nie adresów domyślnie.) Na przykład trasa z „Chicago do Illinois” do „Toronto w stanie ONT” będzie zawierać wyniki w kilometrach, a na odwrocie w kilometrach. Możesz zastąpić ten system jednostek, 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 podana w kilometrach.
  • UnitSystem.IMPERIAL określa sposób użycia systemu Imperial (angielski). Odległości są podawane w milach.

Uwaga: to ustawienie systemowe ma wpływ tylko na tekst wyświetlany użytkownikowi. Wynik wyznaczania trasy zawiera również wartości odległości, które nie są wyświetlane użytkownikowi. Są zawsze podawane w metrach.

Promowanie regionu ze względu na wskazówki dojazdu

Usługa wyznaczania trasy w interfejsie API Map Google zwraca wyniki adresów z domeną (regionem lub krajem), z którego załadowano kod 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żące 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ż te, które wczytują się w http://maps.google.es/ (Hiszpania).

Możesz też ustawić opcję Trasa dojazdu, aby zwracała wyniki dostosowane do konkretnego regionu za pomocą parametru region. Ten parametr przyjmuje kod regionu określony w postaci dwuznakowego (nienumerycznego) subtagu regionu Unicode. W większości przypadków tagi te są bezpośrednio mapowane na dwuliterowe wartości domen ccTLD (domeny najwyższego poziomu), np. „uk” w pl. Tag region obsługuje też kody ISO-3166-1, które czasami różnią się od wartości ccTLD (np. „GB” dla „Wielkiej Brytanii”).

Jeśli używasz parametru region:

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

Promowanie wyników ze względu na region jest dostępne tylko w przypadku krajów i regionów obsługujących wskazówki dojazdu. Zajrzyj na stronę Szczegóły zasięgu w Google Maps Platform, aby dowiedzieć się, jak dotrzeć do klientów z innych krajów za pomocą interfejsu Route API.

Wskazówki dotyczące renderowania

Inicjowanie żądania wyznaczania trasy w DirectionsService za pomocą metody route() wymaga przekazania wywołania zwrotnego, które jest wykonywane po zakończeniu żądania usługi. Wywołanie zwrotne zwróci w odpowiedzi kod DirectionsResult i DirectionsStatus.

Stan zapytania o wskazówki dojazdu

DirectionsStatus może zwracać te wartości:

  • OK wskazuje, że odpowiedź zawiera prawidłową wartość DirectionsResult.
  • NOT_FOUND wskazuje co najmniej jedną z lokalizacji określonych w pochodzeniu, miejscu docelowym lub punktach orientacyjnych punktu żądania. Nie można przetworzyć danych geograficznych.
  • ZERO_RESULTS oznacza, że nie można znaleźć trasy między źródłem a miejscem docelowym.
  • Wartość MAX_WAYPOINTS_EXCEEDED oznacza, że w polu DirectionsRequest podano zbyt wiele pól DirectionsWaypoint. Zapoznaj się poniżej z sekcją dotyczącą limitów punktów na trasie.
  • MAX_ROUTE_LENGTH_EXCEEDED oznacza, że żądana trasa jest zbyt długa i nie można jej przetworzyć. Ten błąd występuje, gdy zwracane są bardziej złożone wskazówki. Spróbuj zmniejszyć liczbę punktów na trasie, zakrętów lub instrukcje.
  • Wartość INVALID_REQUEST oznacza, że podany element DirectionsRequest jest nieprawidłowy. Najczęstsze przyczyny tego kodu błędu to żądania bez źródła lub miejsca docelowego albo żądanie transportu 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 internetowa nie może korzystać z usługi wyznaczania trasy.
  • UNKNOWN_ERROR oznacza, że nie udało się przetworzyć żądania trasy z powodu błędu serwera. Prośba może się udać, jeśli spróbujesz ponownie.

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

Wyświetlanie trasy dojazdu

DirectionsResult zawiera wynik zapytania o trasę dojazdu, które możesz wykonać samodzielnie lub przekazać do obiektu DirectionsRenderer, który może automatycznie obsłużyć wyświetlenie wyniku na mapie.

Aby wyświetlić DirectionsResult za pomocą DirectionsRenderer, wykonaj 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 tak jak powyżej. Ponieważ mechanizm renderowania jest MVCObject, automatycznie wykryje wszystkie zmiany w jego właściwościach i zaktualizuje mapę, gdy zmieni się powiązana z nią trasa.

W przykładzie poniżej obliczono wskazówki dojazdu między 2 lokalizacjami na trasie nr 66, gdzie miejsce docelowe i miejsce docelowe są określane przez wymienione na liście wartości "start" i "end". DirectionsRenderer obsługuje wyświetlanie linii łamanej między wskazywanymi lokalizacjami, a także w razie potrzeby umiejscowienie znaczników w punkcie początkowym, miejscu docelowym i we wszystkich punktach pośrednich.

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 strony 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 wskazówki dojazdu różnymi środkami transportu między Haight-Ashbury a Ocean Beach w San Francisco:

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 strony 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 mu <div>, w którym wyświetla się tę informację. Dzięki temu będziesz mieć także pewność, że wyświetlasz odpowiednie informacje o prawach autorskich i wszelkie ostrzeżenia związane z wynikiem.

Wskazówki tekstowe będą wyświetlane w preferowanym języku przeglądarki lub w języku wskazanym podczas wczytywania kodu JavaScript interfejsu API przy użyciu parametru language. Więcej informacji znajdziesz w sekcji Lokalizacja. W przypadku wskazówek dojazdu transportem publicznym czas będzie wyświetlany w strefie czasowej tego przystanku.

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

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

W treści strony 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 wyznaczania 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, z których każdy zawiera szczegółowe informacje o geokodowaniu punktu początkowego, miejsca docelowego i punktów pośrednich.
  • routes[] zawiera tablicę obiektów DirectionsRoute. Każda trasa wskazuje trasę z punktu początkowego do miejsca docelowego określonego w DirectionsRequest. Zasadniczo zwracana jest tylko 1 trasa dla każdego żądania, chyba że w polu provideRouteAlternatives żądania ustawiona jest wartość true, w której może zostać zwróconych wiele tras.

Uwaga: właściwość via_waypoint została wycofana na alternatywnych trasach. Wersja 3.27 to ostatnia wersja interfejsu API, która dodaje kolejne punkty pośrednie w alternatywnych trasach. W przypadku interfejsu API w wersji 3.28 lub nowszej możesz nadal implementować przeciągane wskazówki za pomocą usługi wyznaczania trasy, wyłączając przeciąganie alternatywnych tras. Przeciągnij tylko trasę główną. Użytkownicy mogą przeciągać główną trasę, dopóki nie pasuje do trasy alternatywnej.

Wskazówki dojazdu z kodowaniem geograficznym

Pole DirectionsGeocodedWaypoint zawiera szczegółowe informacje o geokodowaniu punktu początkowego, miejsca docelowego i punktów pośrednich.

DirectionsGeocodedWaypoint to literał obiektu 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. Adres został przeanalizowany, a przynajmniej 1 kod geograficzny został zwrócony.
    • "ZERO_RESULTS" wskazuje, że udało się przetworzyć dane geograficzne, ale nie znaleziono żadnych wyników. Może tak się zdarzyć, jeśli koder został przekazany jako nieistniejący address.

  • Parametr partial_match wskazuje, że geokoder nie zwracał dokładnego dopasowania do pierwotnego żądania, chociaż mógł go dopasować do części żądanego adresu. Możesz sprawdzić pierwotną prośbę o weryfikację i niepoprawny adres.

    Częściowo pasujące są najczęściej adresy, które nie istnieją w regionie podanym w żądaniu. Częściowe dopasowania mogą się też pojawić, gdy żądanie pasuje do co najmniej dwóch lokalizacji w tym samym regionie. Na przykład wyszukiwanie „Hillpar St, Bristol, Wielka Brytania” zwróci częściowo dopasowania do ulicy Henry Street i ulicy Henrietta. Pamiętaj, że jeśli żądanie zawiera błędnie wpisany komponent adresu, usługa geokodowania może zaproponować inny adres. Sugestie aktywowane w ten sposób również będą oznaczane jako częściowe dopasowanie.

  • place_idto unikalny identyfikator miejsca, którego można używać z innymi interfejsami API Google. Możesz na przykład użyć place_id w bibliotece Miejsca Google API, aby uzyskać szczegółowe informacje o lokalnej firmie, takie jak numer telefonu, godziny otwarcia, opinie użytkowników itp. Zapoznaj się z omówieniem identyfikatora miejsca.
  • types[] to tablica wskazująca typ zwróconego wyniku. Ta tablica zawiera zestaw 0 lub więcej tagów określających typ cechy zwróconego w wyniku. Na przykład mapa geograficzna słowa „Chicago” zwraca nazwę „miasto”, która wskazuje, że „Chicago” jest miastem, a „polityczna” wskazuje, że jest to podmiot polityczny.

Trasy dojazdu

Uwaga: starsza wersja obiektu typu DirectionsTrip została zmieniona na DirectionsRoute. Pamiętaj, że teraz trasa obejmuje cały początek, a nie tylko etap podróży nadrzędnej.

DirectionsRoute zawiera 1 wynik z określonego miejsca docelowego i miejsca docelowego. Trasa może się składać z 1 lub więcej nóg (typu DirectionsLeg) w zależności od tego, czy zostały określone punkty trasy. Trasa zawiera również informacje o prawach autorskich i ostrzeżeniach, które muszą być wyświetlane razem z informacjami o routingu.

DirectionsRoute to literał obiektu z tymi polami:

  • legs[] zawiera tablicę obiektów DirectionsLeg, z których każdy zawiera informacje o odcinku trasy z dwóch lokalizacji na danej trasie. Dla każdego określonego punktu docelowego lub miejsca docelowego będzie dostępna osobna kolumna. Trasa bez punktów pośrednich będzie zawierać dokładnie 1 obiekt DirectionsLeg. Każdy etap składa się z serii DirectionStep sekund.
  • waypoint_order zawiera tablicę wskazującą kolejność dowolnych punktów na trasie do obliczonej trasy. Ta tablica może zawierać zmienioną kolejność, jeśli właściwość DirectionsRequest została przekazana do optimizeWaypoints: true.
  • overview_path zawiera tablicę LatLng, która reprezentuje przybliżoną (wygładzoną) ścieżkę wyników wyszukiwania.
  • overview_polyline zawiera 1 obiekt points, który zawiera reprezentację zakodowanej linii łamanej trasy. Ta linia łamana to przybliżona (wygładzona) ścieżka wynikowych połączeń.
  • bounds zawiera obiekt LatLngBounds wskazujący granice linii łamanej na danej trasie.
  • copyrights zawiera tekst dotyczący praw autorskich, który będzie wyświetlany na tej trasie.
  • warnings[] zawiera tablicę ostrzeżeń, które należy wyświetlić podczas pokazywania tych wskazówek. Jeśli nie używasz podanego obiektu DirectionsRenderer, musisz samodzielnie wyświetlać i wyświetlać te ostrzeżenia.
  • fare zawiera łączną cenę za daną trasę (czyli łączne koszty biletów). Ta właściwość jest zwracana tylko w przypadku zapytań o transport publiczny i tylko w przypadku tras, dla których dostępne są informacje o cenach wszystkich etapów transportu publicznego. Są to między innymi:
    • currency: kod waluty ISO 4217 wskazujący walutę, w której jest wyrażona kwota.
    • value: łączna kwota opłat w walucie określonej powyżej.

Stopki

Uwaga: starsza wersja obiektu typu DirectionsRoute została zmieniona na DirectionsLeg.

DirectionsLeg określa jeden etap podróży z punktu początkowego do miejsca docelowego na obliczonej trasie. W przypadku tras, które nie mają żadnych punktów pośrednich, trasa składa się z 1 „nogi”, ale w przypadku tras definiujących 1 lub więcej punktów drogi odpowiada 1 lub więcej odnóg odpowiadających poszczególnym etapom podróży.

DirectionsLeg to literał obiektu z tymi polami:

  • steps[] zawiera tablicę DirectionsStep obiektów wskazujących informacje o poszczególnych etapach kroku podróży.

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

    • value oznacza odległość w metrach
    • text zawiera ciąg znaków reprezentujący odległość, która jest domyślnie wyświetlana w jednostkach używanych w punkcie początkowym. (Na przykład mile będą używane dla dowolnego miejsca docelowego w Stanach Zjednoczonych). Ten system jednostek możesz zastąpić, określając UnitSystem w pierwotnym zapytaniu. Pamiętaj, że bez względu na to, jakiego systemu jednostek używasz, 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 etapu w postaci obiektu Duration takiego formularza:

    • value oznacza czas trwania w sekundach.
    • text zawiera ciąg znaków odpowiadający czasowi 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 obejmuje punktów pośrednich. Oznacza to, że nie uwzględnia on punktów pośrednich, w których wartość stopover wynosi true.
    • Żądanie dotyczy wskazówek dojazdu – mode ma wartość driving.
    • departureTime jest częścią żądania drivingOptions w żądaniu.
    • Informacje o natężeniu ruchu są dostępne dla wybranej trasy.

    duration_in_traffic zawiera te pola:

    • value oznacza czas trwania w sekundach.
    • text zawiera czytelny dla człowieka czas trwania.
  • arrival_time zawiera szacowany czas dotarcia na ten etap. Ta usługa jest zwracana tylko w przypadku wskazówek dojazdu transportem publicznym. Wynik jest zwracany jako obiekt Time z 3 właściwościami:
    • value godzinę określoną jako obiekt JavaScript Date.
    • text godzinę określoną jako ciąg znaków. Czas jest wyświetlany zgodnie ze strefą czasową przystanku transportu publicznego.
    • time_zone zawiera strefę czasową tej stacji. Wartością jest nazwa strefy czasowej zdefiniowana w bazie danych stref czasowych IANA (np. „Ameryka/Nowy_Jork”).
  • departure_time zawiera szacowany czas odjazdu dla tego etapu określony 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 Web wyznaczania trasy oblicza wskazówki dojazdu między lokalizacjami, korzystając z najbliższej opcji transportu (zwykle drogi) w miejscu początkowym i końcowym, więc wartość start_location może się różnić od podanego punktu początkowego, jeśli na przykład 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 najbliższej opcji transportu (zwykle drogi) w punkcie początkowym i końcowym, dlatego end_location może różnić się od podanej wartości docelowej tego etapu, jeśli na przykład droga nie jest w pobliżu celu.
  • start_address zawiera czytelny dla człowieka adres (zwykle adres) początku początku tego etapu.

    Ta treść powinna być odczytywana w takiej postaci, w jakiej został sformatowany. Nie przetwarzaj automatycznie sformatowanego adresu.
  • end_address zawiera czytelny dla człowieka adres (zwykle ulicę) na końcu tego etapu.

    Ta treść powinna być odczytywana w takiej postaci, w jakiej został sformatowany. Nie przetwarzaj automatycznie sformatowanego adresu.

Instrukcje dojazdu

DirectionsStep to najbardziej atomowa jednostka trasy wskazówek dojazdu, która zawiera pojedynczy krok opisujący konkretną, jedną instrukcję na trasie. Na przykład „Skręć w lewo na W. 4. ul. Krok ten nie tylko opisuje instrukcje, ale zawiera też informacje o odległości i czasie trwania oraz związek z tym krokiem. Na przykład krok oznaczony jako „Scal z I-80 West” może zawierać czas trwania „37 mil” i „40 minut”, co wskazuje, że kolejny krok to 37 mil/40 minut od tego kroku.

Podczas wyszukiwania trasy dojazdu podczas korzystania z usługi wyznaczania trasy tablica kroków będzie zawierać dodatkowe szczegółowe informacje o transporcie publicznym w postaci obiektu transit. Jeśli trasa obejmuje kilka środków transportu, w tablicy steps[] podawane będą szczegółowe wskazówki dotyczące spacerów lub jazdy samochodem. Na przykład krok spacerowy będzie zawierał wskazówki dotyczące lokalizacji początkowej i końcowej: „Pieszo do Ales Ave & Fitch St”. Ten krok będzie zawierał szczegółowe wskazówki piesze dla tej trasy w tablicy steps[], takie jak: „Kieruj się na północny zachód”, „Skieruj w lewo na Arelious Walker” i „Skieruj na lewo na 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. Opis znajdziesz w sekcji DirectionsLeg powyżej. Jeśli odległość nie jest znana, to pole może być nieokreślone.
  • duration zawiera szacowany czas potrzebny na wykonanie kroku (do następnego kroku) jako obiekt Duration. Opis znajdziesz w sekcji DirectionsLeg powyżej. Jeśli czas trwania jest nieznany, to pole może być nieokreślone.
  • start_location zawiera geokodowaną wartość LatLng punktu początkowego tego kroku.
  • end_location zawiera LatLng punktu końcowego tego kroku.
  • polyline zawiera 1 obiekt points, który zawiera reprezentację zakodowanej linii łamanej kroku. Ta linia łamana to przybliżona (wygładzona) ścieżka kroku.
  • steps[] literał obiektu DirectionsStep zawierający szczegółowe wskazówki piesze lub dotyczące trasy dojazdu transportem publicznym. Kroki podrzędne są dostępne tylko w przypadku trasy 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 tego kroku.
  • transit zawiera informacje dotyczące transportu publicznego, takie jak czas przyjazdu i odjazdu oraz nazwę linii.

Informacje o transporcie publicznym

Wskazówki dojazdu transportem publicznym zwracają dodatkowe informacje, które nie są istotne dla innych środków transportu. Te dodatkowe właściwości są udostępniane przez obiekt TransitDetails, który jest zwracany jako właściwość DirectionsStep. Z obiektu TransitDetails możesz uzyskać dodatkowe informacje na temat obiektów 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 lub przystanek z tymi właściwościami:
    • name nazwa stacji/przystanku. np. „Union Square”.
    • location lokalizacja stacji/przystanku transportu publicznego wyrażona 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 godzinę określoną jako obiekt JavaScript Date.
    • text godzinę określoną jako ciąg znaków. Czas jest wyświetlany zgodnie ze strefą czasową przystanku transportu publicznego.
    • time_zone zawiera strefę czasową tej stacji. Wartością jest nazwa strefy czasowej zdefiniowana w bazie danych stref czasowych IANA (np. „Ameryka/Nowy_Jork”).
  • Pole departure_time zawiera czas odjazdu podany jako obiekt Time.
  • headsign określa kierunek, w którym porusza się ten pojazd, zgodnie z informacjami na pojeździe lub przy przystanku. Często będzie to stacja końcowa.
  • headway, jeśli jest dostępny. Ten parametr określa oczekiwaną liczbę sekund między odjazdami z tego samego przystanku. Jeśli na przykład headway ma wartość 600, możesz spodziewać się 10 minut oczekiwania, jeśli nie uda Ci się zdążyć na autobus.
  • line zawiera literał obiektu TransitLine, który zawiera informacje o linii transportu publicznego użytej w tym kroku. Pole TransitLine zawiera nazwę i operator wiersza oraz inne właściwości opisane w dokumentacji referencyjnej TransitLine.
  • num_stops zawiera liczbę przesiadek w tym kroku. Obejmuje przystanek przyjazdu, ale nie przystanek wylotu. Jeśli na przykład wskazówki dojazdu będą obejmować postój z A, przeloty B i C oraz przystanek D, num_stops zwróci wartość 3.

Linia komunikacyjna

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

  • name zawiera pełną nazwę tego wiersza transportu publicznego, np. „7 Avenue Express” lub „14th St Crosstown”.
  • short_name zawiera krótką nazwę tego wiersza transportu publicznego. Zazwyczaj jest to numer wiersza, np. „2” lub „M14”.
  • agencies to tablica zawierająca pojedynczy obiekt TransitAgency. Obiekt TransitAgency dostarcza informacji o operatorze tego wiersza, w tym o tych właściwościach:
    • name zawiera nazwę przewoźnika.
    • phone zawiera numer telefonu przewoźnika.
    • url zawiera 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 tego przewoźnika, który został 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, na przykład system metra w Nowym Jorku, mają ikony odnoszące się do tej linii.
  • color zawiera kolor powszechnie używany na szyldach transportu publicznego. Kolor zostanie podany jako ciąg szesnastkowy, 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 dotyczącej typu pojazdu.
    • icon zawiera adres URL ikony często powiązanej z tym typem pojazdu.
    • local_icon zawiera adres URL ikony powiązanej z tym typem pojazdu, zależnie od 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ężka kolej.
VehicleType.COMMUTER_TRAIN Kolej podmiejska.
VehicleType.HIGH_SPEED_TRAIN Pociąg szybki.
VehicleType.BUS Autobus.
VehicleType.INTERCITY_BUS Autobus krajowy.
VehicleType.TROLLEYBUS Trolejbus.
VehicleType.SHARE_TAXI Taksówka z dojazdem to rodzaj autobusu, który umożliwia podwożenie i odbiór pasażerów w dowolne miejsce na trasie.
VehicleType.FERRY Prom.
VehicleType.CABLE_CAR Pojazd poruszający się kablem, zwykle na ziemi. Kolejka linowa może mieć typ VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Kolejka linowa.
VehicleType.FUNICULAR Pojazd ciągnięty za pomocą kabla. Kolejka linowa zazwyczaj składa się z 2 samochodów, z których każdy pełni funkcję przeciwstawną.
VehicleType.OTHER Wszystkie inne pojazdy będą zwracać ten typ.

Sprawdzam wyniki

Komponenty DirectionsResults – DirectionsRoute, DirectionsLeg, DirectionsStep i TransitDetails – mogą być analizowane i wykorzystywane podczas analizowania odpowiedzi dojazdu.

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

Poniżej znajduje się przykład trasy pieszej do niektórych atrakcji turystycznych w Nowym Jorku. Sprawdzamy trasę, dodając DirectionsStep dla każdego kroku, i dołączając do InfoWindow informacje z instrukcjami.

Uwaga: obliczamy trasę pieszą, dlatego 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 strony 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 w trasach

Jak zaznaczono w funkcji RouteRequest, możesz też określić punkty pośrednie (typu DirectionsWaypoint) podczas obliczania tras w usłudze wyznaczania trasy pieszej, rowerowej lub samochodem. Punkty pośrednie nie są dostępne do wyznaczania trasy dojazdu transportem publicznym. Punkty pośrednie umożliwiają obliczanie tras przez dodatkowe lokalizacje. W takim przypadku zwrócona trasa przechodzi przez określone punkty na trasie.

waypoint zawiera te pola:

  • location (wymagane) określa adres punktu pośredniego.
  • stopover (opcjonalnie) wskazuje, czy ten punkt na trasie jest rzeczywistym przystankiem na trasie (true) czy tylko preferuje trasę przez wskazaną lokalizację (false). Przesiadki są domyślnie ustawione na true.

Domyślnie usługa wyznaczania trasy wyznacza trasę przez podane punkty pośrednie w określonej kolejności. Opcjonalnie możesz przekazać właściwość optimizeWaypoints: true w obiekcie DirectionsRequest, aby umożliwić usłudze Trasa zoptymalizowanie określonej trasy przez zmianę kolejności punktów na trasie w bardziej wydajny sposób. (Ta optymalizacja jest zastosowaniem problemu z podróżą sprzedawcy). Czas podróży jest głównym czynnikiem zoptymalizowanym, 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żliwe było zoptymalizowanie trasy, wszystkie punkty pośrednie muszą być zatrzymaniem.

Jeśli polecisz usłudze wyznaczania trasy, by zoptymalizować kolejność punktów na trasie, ich kolejność zostanie zwrócona w polu waypoint_order w obiekcie DirectionsResult.

W tym przykładzie obliczamy trasy biegowe w całych Stanach Zjednoczonych na podstawie różnych punktów początkowych, punktów końcowych i punktów pośrednich. (aby wybrać wiele punktów na trasie, zaznacz elementy na liście, naciskając Ctrl). Sprawdź, czy routes.start_address i routes.end_address zawierają tekst dotyczący punktu początkowego i końcowego każdej trasy.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;
index.js

Ograniczenia dotyczące Waypoints

Obowiązują te ograniczenia użytkowania:

  • Maksymalna liczba punktów na trasie dozwolonych podczas korzystania z usługi wyznaczania trasy w interfejsie API JavaScript Map Google wynosi 25, plus punkt początkowy i docelowy. Limity są takie same w usłudze internetowej Trasa API.
  • W przypadku usługi internetowej Trasa dojazdu do interfejsu API klienci mogą mieć 25 punktów pośrednich, a także punkt początkowy i docelowy.
  • Klienci korzystający z abonamentu Premium w Google Maps Platform mogą dodać 25 punktów pośrednich, a także ich punkt początkowy i miejsce docelowe.
  • Punkty pośrednie nie są obsługiwane w przypadku wskazówek dojazdu transportem publicznym.

Sposoby przeciągania

Użytkownicy mogą dynamicznie modyfikować wyświetlane trasy rowerowe, piesze i samochodowe za pomocą DirectionsRenderer, jeśli są przeciągnięte. Dzięki temu użytkownik może wybierać i zmieniać trasy, klikając i przeciągając pojawiające się na mapie ścieżki. Aby wskazać, czy wyświetlacz mechanizmu renderowania zezwala na przeciąganie wskazówek dojazdu, ustaw 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) renderowanego wyniku i przenieść wskazany komponent do nowej lokalizacji. DirectionsRenderer automatycznie się zaktualizuje, aby wyświetlić zmodyfikowaną ścieżkę. Po premierze na mapie pojawi się punkt przejściowy (wskazuje na to mały biały znacznik). Wybór i przesunięcie segmentu ścieżki spowoduje zmianę tego fragmentu drogi, a wybranie i przesunięcie znacznika punktu (w tym punktów początkowych i końcowych) wpłynie na nogi trasy przechodzącej przez ten punkt.

Ponieważ wskazówki przeciągane są zmieniane i renderowane po stronie klienta, możesz monitorować zdarzenie directions_changed na urządzeniu DirectionsRenderer i otrzymywać z niego powiadomienia o zmianach wyświetlanych wskazówek.

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ć całkowitą odległość na każdym etapie trasy.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
index.js
Zobacz przykład

Fragment