مسیر پیش‌فرضی که توسط Routes API برگردانده می‌شود، معمولاً سریع‌ترین مسیر از مبدا به مقصد است. وقتی شما درخواست مسیرهای جایگزین می‌کنید، API آرایه‌ای از حداکثر سه مسیر را به همراه مسیر پیش‌فرض برمی‌گرداند. سپس مشتریان شما می‌توانند مسیری را که برای آنها بهترین است انتخاب کنند.
کد منبع کامل مثال را ببینید
نمونه کد زیر نحوه درخواست مسیرهای جایگزین و سپس ترسیم مسیرها روی نقشه را نشان می‌دهد.
تایپ اسکریپت
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();
جاوا اسکریپت
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();
سی‌اس‌اس
/* * 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>
<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>نمونه را امتحان کنید
ملاحظات هنگام درخواست مسیرهای جایگزین
هنگام درخواست مسیرهای جایگزین، موارد زیر را در نظر بگیرید:
- شما فقط می‌توانید برای مسیرهایی که فاقد نقاط میانی هستند، درخواست مسیرهای جایگزین کنید. درخواست مسیرهای جایگزین در صورتی که مسیر، نقاط میانی را مشخص کند، خطایی ایجاد نمی‌کند. با این حال، هیچ مسیر جایگزینی بازگردانده نمی‌شود.
- پاسخ حداکثر شامل سه مسیر جایگزین است. با این حال، گاهی اوقات هیچ مسیر جایگزینی در دسترس نیست، بنابراین پاسخ فقط شامل مسیر پیش‌فرض است.
- به دلیل پردازش اضافی مورد نیاز برای محاسبه مسیرهای جایگزین، درخواست مسیرهای جایگزین ممکن است زمان پاسخگویی API را افزایش دهد.
درخواست مسیرهای جایگزین
برای درخواست مسیرهای جایگزین، در درخواست computeRoutes ، computeAlternativeRoutes برابر با 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. };
برای دریافت مسیرها، آرایه مسیرها (برای مثال، result.routes ) را پیمایش کنید. مسیر پیش‌فرض دارای برچسب مسیر RouteLabel.DEFAULT_ROUTE است. نمونه کد زیر پیمایش مسیرها و ترسیم مسیر اصلی در آخر را نشان می‌دهد.
// 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); }