Alternative Routen abrufen

Entwickler im Europäischen Wirtschaftsraum (EWR)

Die von der Routes API zurückgegebene Standardroute ist in der Regel die schnellste Route vom Start- zum Zielort. Wenn Sie alternative Routen anfordern, gibt die API ein Array mit bis zu drei Routen zusammen mit der Standardroute zurück. Ihre Kunden können dann die für sie am besten geeignete Route auswählen.

Vollständigen Quellcode des Beispiels ansehen

Im folgenden Codebeispiel wird gezeigt, wie Sie alternative Routen anfordern und dann auf einer Karte einzeichnen.

TypeScript

const mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route, RouteLabel }] = await Promise.all([
        google.maps.importLibrary('routes'),
    ]);

    // Build a request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'San Francisco, CA',
        destination: 'Sunset Dr Pacific Grove, CA 93950',
        travelMode: 'DRIVING',
        computeAlternativeRoutes: true,
        fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    let primaryRoute: google.maps.routes.Route | undefined;

    for (const route of result.routes) {
        // Save the primary route for last so it's drawn on top.
        if (
            // Check for the default route.
            route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
        ) {
            primaryRoute = route;
        } else {
            drawRoute(route, false);
        }
    }

    if (primaryRoute) {
        drawRoute(primaryRoute, true);
        await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
        innerMap.fitBounds(primaryRoute.viewport!, 50);
        innerMap.setHeading(70);
    }

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

function drawRoute(route: google.maps.routes.Route, isPrimaryRoute: boolean) {
    mapPolylines.push(
        ...route.createPolylines({
            polylineOptions: isPrimaryRoute
                ? {
                      map: innerMap,
                      strokeWeight: 5,
                  }
                : {
                      map: innerMap,
                      strokeColor: '#669DF6',
                      strokeOpacity: 0.5,
                      strokeWeight: 5,
                  },
            colorScheme: innerMap!.get(
                'colorScheme'
            ) as google.maps.ColorScheme,
        })
    );
}

void init();

JavaScript

const mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route, RouteLabel }] = await Promise.all([
        google.maps.importLibrary('routes'),
    ]);

    // Build a request.
    const request = {
        origin: 'San Francisco, CA',
        destination: 'Sunset Dr Pacific Grove, CA 93950',
        travelMode: 'DRIVING',
        computeAlternativeRoutes: true,
        fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    let primaryRoute;

    for (const route of result.routes) {
        // Save the primary route for last so it's drawn on top.
        if (
            // Check for the default route.
            route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
        ) {
            primaryRoute = route;
        } else {
            drawRoute(route, false);
        }
    }

    if (primaryRoute) {
        drawRoute(primaryRoute, true);
        await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
        innerMap.fitBounds(primaryRoute.viewport, 50);
        innerMap.setHeading(70);
    }

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

function drawRoute(route, isPrimaryRoute) {
    mapPolylines.push(
        ...route.createPolylines({
            polylineOptions: isPrimaryRoute
                ? {
                      map: innerMap,
                      strokeWeight: 5,
                  }
                : {
                      map: innerMap,
                      strokeColor: '#669DF6',
                      strokeOpacity: 0.5,
                      strokeWeight: 5,
                  },
            colorScheme: innerMap.get('colorScheme'),
        })
    );
}

void init();

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

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="37.447646, -122.113878" zoom="10"></gmp-map>
    </body>
</html>

Testbeispiel

Hinweise zum Anfordern alternativer Routen

Beachten Sie beim Anfordern alternativer Routen Folgendes:

  • Sie können nur für Routen ohne Zwischenwegpunkte alternative Routen anfordern. Wenn Sie alternative Routen anfordern und die Route Zwischenwegpunkte enthält, wird kein Fehler verursacht. Es werden jedoch keine alternativen Routen zurückgegeben.
  • Die Antwort enthält maximal drei alternative Routen. Manchmal sind jedoch keine alternativen Routen verfügbar, sodass die Antwort nur die Standardroute enthält.
  • Da für die Berechnung alternativer Routen zusätzliche Verarbeitungsschritte erforderlich sind, kann sich die Antwortzeit der API verlängern, wenn alternative Routen angefordert werden.

Alternative Routen anfordern

Wenn Sie alternative Routen anfordern möchten, setzen Sie in der computeRoutes-Anfrage computeAlternativeRoutes auf true. 

// Build a request.
const request = {
    origin: 'San Francisco, CA',
    destination: 'Sunset Dr Pacific Grove, CA 93950',
    travelMode: 'DRIVING',
    computeAlternativeRoutes: true,
    fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
};

Wenn Sie die Routen abrufen möchten, iterieren Sie durch das Routen-Array (z. B. result.routes). Die Standardroute hat das Routenlabel RouteLabel.DEFAULT_ROUTE. Im folgenden Codebeispiel wird gezeigt, wie Sie die Routen durchlaufen und die primäre Route zuletzt zeichnen. 

// Call computeRoutes to get the directions.
const result = await Route.computeRoutes(request);
if (!result.routes || result.routes.length === 0) {
    console.warn('No routes found');
    return;
}

let primaryRoute;

for (const route of result.routes) {
    // Save the primary route for last so it's drawn on top.
    if (
        // Check for the default route.
        route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
    ) {
        primaryRoute = route;
    } else {
        drawRoute(route, false);
    }
}

if (primaryRoute) {
    drawRoute(primaryRoute, true);
    await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
    innerMap.fitBounds(primaryRoute.viewport, 50);
    innerMap.setHeading(70);
}