Alternatif rotalar alma

Avrupa Ekonomik Alanı (AEA) geliştiricileri

Routes API tarafından döndürülen varsayılan rota genellikle başlangıç noktasından varış noktasına giden en hızlı rotadır. Alternatif rotalar istediğinizde API, varsayılan rotayla birlikte en fazla üç rotadan oluşan bir dizi döndürür. Müşterileriniz daha sonra kendileri için en uygun rotayı seçebilir.

Tam örnek kaynak kodunu inceleyin

Aşağıdaki kod örneğinde, alternatif rotaların nasıl isteneceği ve ardından rotaların harita üzerinde nasıl çizileceği gösterilmektedir.

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>

Alternatif rota isteğinde bulunurken dikkat edilmesi gereken noktalar

Alternatif rota isterken aşağıdakileri göz önünde bulundurun:

  • Yalnızca ara yol noktası olmayan rotalar için alternatif rota isteğinde bulunabilirsiniz. Rota ara noktalar belirtirken alternatif rotalar istemek hataya neden olmaz. Ancak alternatif rota döndürülmez.
  • Yanıtta en fazla üç alternatif rota bulunur. Ancak bazen alternatif rota bulunmadığı için yanıtta yalnızca varsayılan rota yer alır.
  • Alternatif rotaları hesaplamak için ek işlem yapılması gerektiğinden alternatif rota isteğinde bulunmak API'nin yanıt süresini uzatabilir.

Alternatif rota isteğinde bulunma

Alternatif rotalar istemek için computeAlternativeRoutes değerini computeRoutes isteğinde true olarak ayarlayın. 

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

Rotaları almak için rotalar dizisinde yineleme yapın (örneğin, result.routes). Varsayılan rotanın rota etiketi RouteLabel.DEFAULT_ROUTE'dir. Aşağıdaki kod örneğinde, rotalar arasında yineleme yapma ve birincil rotayı en son çizme işlemi gösterilmektedir. 

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