Wyznacz trasę

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Jeśli Twój adres rozliczeniowy znajduje się w Europejskim Obszarze Gospodarczym, od 8 lipca 2025 r. do korzystania z usług będą miały zastosowanie Warunki korzystania z usługi Google Maps Platform w EOG. Funkcje różnią się w zależności od regionu. Więcej informacji

Trasa to ścieżka, po której można się poruszać, między lokalizacją początkową (miejscem wyjazdu) a lokalizacją końcową (miejscem docelowym). Możesz wybrać trasę dla różnych środków transportu, takich jak pieszy, rowerowy lub różne typy pojazdów. Możesz też poprosić o szczegóły trasy, takie jak odległość, szacowany czas przejazdu, spodziewane opłaty i szczegółowe wskazówki dojazdu.

Zobacz pełny przykładowy kod źródłowy

Poniższy przykładowy kod pokazuje, jak uzyskać trasę z wskazówkami dojazdu między 2 lokalizacjami.

TypeScript

// Initialize and add the map.
let map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function initMap(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
        google.maps.importLibrary(
            'places'
        ) as Promise<google.maps.PlacesLibrary>,
        //@ts-ignore
        google.maps.importLibrary('routes') as Promise<google.maps.Routes>,
    ]);

    map = new Map(document.getElementById('map') as HTMLElement, {
        zoom: 12,
        center: center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };

    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes, fallbackInfo, geocodingResults } =
        await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => polyline.setMap(map));

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => marker.setMap(map));

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = (await google.maps.importLibrary(
        'core'
    )) as google.maps.CoreLibrary;
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

initMap();
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        //@ts-ignore
        google.maps.importLibrary('routes'),
    ]);
    map = new Map(document.getElementById('map'), {
        zoom: 12,
        center: center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });
    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });
    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Call computeRoutes to get the directions.
    const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
    // Use createPolylines to create polylines for the route.
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => polyline.setMap(map));
    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => marker.setMap(map));
    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);
    // Fit the map to the path.
    fitMapToPath(routes[0].path);
}
// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = (await google.maps.importLibrary('core'));
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}
initMap();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
    </body>
</html>
index.html

Wypróbuj przykład

JSFiddle.net

Aby poprosić o wyznaczenie trasy między 2 lokalizacjami, wywołaj metodę computeRoutes(). W przykładzie poniżej pokazujemy, jak zdefiniować żądanie, a następnie wywołać funkcję computeRoutes(), aby uzyskać trasę.

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);
    

Wybierz pola do zwrócenia

Gdy wysyłasz żądanie trasy, musisz użyć maski pola, aby określić, jakie informacje powinna zwrócić odpowiedź. W masce pola możesz podać nazwy właściwości klasy trasy.

Użycie maski pola zapewnia też, że nie będziesz prosić o niepotrzebne dane, co z kolei pomaga zmniejszyć opóźnienie odpowiedzi i uniknąć zwracania informacji, których Twój system nie potrzebuje.

Określ listę potrzebnych pól, ustawiając właściwość ComputeRoutesRequest.fields, jak pokazano w tym fragmencie kodu:

TypeScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Określanie lokalizacji na trasie

Aby obliczyć trasę, musisz podać co najmniej lokalizację początku i końca trasy oraz maskę pola. Możesz też określić pośrednie punkty na trasie i używać ich do innych czynności, np. dodawania przystanków lub punktów przejazdu.

W sekcji ComputeRoutesRequest możesz określić lokalizację na jeden z tych sposobów:

• Miejsce (preferowane)
• Współrzędne geograficzne
• Ciąg znaków adresu („Chicago, IL” lub „Darwin, NT, Australia”)
• Plus Code

Lokalizacje wszystkich punktów pośrednich w żądaniu możesz określić w ten sam sposób lub je wymieszać. Możesz na przykład użyć współrzędnych geograficznych jako punktu początkowego i obiektu Place jako punktu docelowego.

Aby zwiększyć wydajność i dokładność, używaj obiektów Place zamiast współrzędnych geograficznych lub ciągów znaków adresu. Identyfikatory miejsc są jednoznaczne i zapewniają korzyści związane z geokodowaniem na potrzeby wyznaczania tras, np. punktów dostępu i zmiennych dotyczących ruchu. Pomagają one uniknąć sytuacji, które mogą wystąpić w przypadku innych sposobów określania lokalizacji:

• Korzystanie ze współrzędnych geograficznych może spowodować, że lokalizacja zostanie przypisana do najbliższej drogi, która może nie być punktem dostępu do obiektu, a nawet drogą, która szybko lub bezpiecznie prowadzi do celu.
• Przed obliczeniem trasy ciągi adresów muszą zostać najpierw przekształcone przez interfejs Routes API na współrzędne szerokości i długości geograficznej. Może to wpłynąć na skuteczność.

Określ lokalizację jako obiekt Place (zalecane)

Aby określić lokalizację za pomocą miejsca, utwórz nową instancję Place. Poniższy fragment kodu pokazuje, jak utworzyć nowe instancje Place dla origin i destination, a następnie użyć ich w ComputeRoutesRequest:

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});
const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});
const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Współrzędne geograficzne szerokości i długości

Aby określić lokalizację za pomocą współrzędnych geograficznych, utwórz nowy obiekt google.maps.LatLngLiteral, google.maps.LatLngAltitude lub google.maps.LatLngAltitudeLiteral. Poniższy fragment kodu pokazuje, jak utworzyć nowe instancje google.maps.LatLngLiteral dla origin i destination, a następnie użyć ich w computeRoutesRequest:

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.js

Ciąg tekstowy adresu

Ciągi adresów to dosłowne adresy reprezentowane przez ciąg znaków (np. „1600 Amphitheatre Parkway, Mountain View, CA”). Geokodowanie to proces przekształcania ciągu znaków adresu na współrzędne szerokości i długości geograficznej (np. szerokość geograficzna 37.423021 i długość geograficzna -122.083739).

Gdy przekazujesz ciąg znaków adresu jako lokalizację punktu pośredniego, biblioteka Routes wewnętrznie geokoduje ten ciąg znaków, aby przekonwertować go na współrzędne geograficzne.

Poniższy fragment kodu pokazuje, jak utworzyć ComputeRoutesRequest z ciągiem adresu dla origin i destination:

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.js

Ustawianie regionu adresu

Jeśli jako lokalizację punktu pośredniego podasz niepełny ciąg znaków adresu, interfejs API może użyć nieprawidłowych współrzędnych szerokości i długości geograficznej. Na przykład wysyłasz żądanie, w którym jako miejsce początkowe podajesz „Toledo”, a jako miejsce docelowe – „Madryt” w przypadku trasy samochodowej:

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};
    

W tym przykładzie „Toledo” jest interpretowane jako miasto w stanie Ohio w Stanach Zjednoczonych, a nie w Hiszpanii. W związku z tym żądanie zwraca pustą tablicę, co oznacza, że nie ma żadnych tras.

Możesz skonfigurować interfejs API tak, aby zwracał wyniki z uwzględnieniem określonego regionu, dodając parametr regionCode. Ten parametr określa kod regionu jako dwuznakową wartość ccTLD („domena najwyższego poziomu”). Większość kodów ccTLD jest identyczna z kodami ISO 3166-1, z kilkoma istotnymi wyjątkami. Na przykład krajowa domena najwyższego poziomu Zjednoczonego Królestwa to „uk” (.co.uk), a kod ISO 3166-1 to „gb” (technicznie dla podmiotu „Zjednoczone Królestwo Wielkiej Brytanii i Irlandii Północnej”).

Żądanie wskazówek dojazdu z „Toledo” do „Madrytu”, które zawiera parametr regionCode, zwraca odpowiednie wyniki, ponieważ „Toledo” jest interpretowane jako miasto w Hiszpanii:

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};
    

Plus Code

Wiele osób nie ma dokładnego adresu, co może utrudniać im odbiór przesyłek. Osoby z adresem mogą też woleć odbierać przesyłki w bardziej konkretnych miejscach, np. przy tylnym wejściu lub na rampie załadunkowej.

Kody Plus Code działają jak adresy dla osób lub miejsc, które nie mają rzeczywistego adresu. Kody plus nie są adresami z nazwami ulic i numerami, ale opierają się na współrzędnych określających szerokość i długość geograficzną i są wyświetlane jako liczby i litery.

Google opracowało kody Plus Code, aby każdy mógł korzystać z zalet adresów. Kod plus to zakodowany odnoszący się do lokalizacji ciąg znaków, który jest wyznaczany na podstawie współrzędnych geograficznych i reprezentuje obszar o wielkości 1/8000 stopnia szerokości i 1/8000 stopnia długości geograficznej (około 14 x 14 m na równiku) lub mniejszy. Kodów Plus Code możesz używać zamiast adresów w miejscach, w których nie istnieją lub w których budynki nie są ponumerowane albo ulice nie mają nazw.

Kody Plus Code muszą być sformatowane jako kod globalny lub kod złożony:

• Kod globalny składa się z 4-znakowego kodu obszaru i 6-znakowego lub dłuższego kodu lokalnego. Na przykład dla adresu „1600 Amphitheatre Parkway, Mountain View, CA” kod globalny to „849V”, a kod lokalny to „CWC8+R9”. Następnie używasz całego 10-znakowego kodu plus, aby określić wartość lokalizacji jako „849VCWC8+R9”.
• Kod złożony składa się z lokalnego kodu o długości co najmniej 6 znaków połączonego z określoną lokalizacją. Na przykład adres „450 Serra Mall, Stanford, CA 94305, USA” ma kod lokalny „CRHJ+C3”. W przypadku adresu złożonego połącz kod lokalny z miastem, stanem, kodem pocztowym i krajem w formacie „CRHJ+C3 Stanford, CA 94305, USA”.

Poniższy fragment kodu pokazuje, jak obliczyć trasę, podając punkt pośredni dla miejsca docelowego i miejsca wylotu za pomocą kodów Plus Code:

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.js