Mendapatkan rute alternatif

Developer Wilayah Ekonomi Eropa (EEA)

Rute default yang ditampilkan oleh Routes API biasanya merupakan rute tercepat dari tempat asal ke tempat tujuan. Saat Anda meminta rute alternatif, API akan menampilkan array hingga tiga rute beserta rute default. Selanjutnya, pelanggan Anda dapat memilih rute yang paling sesuai bagi mereka.

Lihat contoh kode sumber yang lengkap

Contoh kode berikut menunjukkan cara meminta rute alternatif, lalu menggambar rute di peta.

TypeScript

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

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

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

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

}

async function getDirections() {
  //@ts-ignore
  // 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 = mapPolylines.concat(
    route.createPolylines({
      polylineOptions: isPrimaryRoute
        ? {
            map: innerMap,
            strokeWeight: 5,
          }
        : {
            map: innerMap,
            strokeColor: "#669DF6",
            strokeOpacity: 0.5,
            strokeWeight: 5,
          },
      colorScheme: innerMap.get("colorScheme"),
    }),
  );
}

initMap();
index.ts

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // 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 = mapPolylines.concat(route.createPolylines({
        polylineOptions: isPrimaryRoute
            ? {
                map: innerMap,
                strokeWeight: 5,
            }
            : {
                map: innerMap,
                strokeColor: "#669DF6",
                strokeOpacity: 0.5,
                strokeWeight: 5,
            },
        colorScheme: innerMap.get("colorScheme"),
    }));
}
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>
    <gmp-map center="37.447646, -122.113878" zoom="10"></gmp-map>
    <!-- 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

Mencoba Contoh

Pertimbangan saat meminta rute alternatif

Saat meminta rute alternatif, pertimbangkan hal berikut:

  • Anda hanya dapat meminta rute alternatif untuk rute tanpa titik jalan perantara. Meminta rute alternatif saat rute menentukan titik jalan perantara tidak menyebabkan error. Namun, tidak ada rute alternatif yang ditampilkan.
  • Respons berisi maksimal tiga rute alternatif. Namun, terkadang tidak ada rute alternatif yang tersedia sehingga respons hanya berisi rute default.
  • Karena pemrosesan tambahan yang diperlukan untuk menghitung rute alternatif, meminta rute alternatif dapat meningkatkan waktu respons API.

Meminta rute alternatif

Untuk meminta rute alternatif, tetapkan computeAlternativeRoutes ke true dalam permintaan computeRoutes. 

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

Untuk mendapatkan rute, lakukan iterasi melalui array rute (misalnya, result.routes). Rute default memiliki label rute RouteLabel.DEFAULT_ROUTE. Contoh kode berikut menunjukkan cara melakukan iterasi melalui rute, dan menggambar rute utama terakhir. 

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