المسار التلقائي الذي تعرضه واجهة برمجة التطبيقات Routes API هو عادةً المسار الأسرع من نقطة الانطلاق إلى الوجهة. عند طلب مسارات بديلة، تعرض واجهة برمجة التطبيقات مصفوفة تتضمّن ما يصل إلى ثلاثة مسارات بالإضافة إلى المسار التلقائي. وبعد ذلك، يمكن لعملائك اختيار المسار الأنسب لهم.
الاطّلاع على رمز المصدر الكامل للمثال
يوضّح نموذج الرمز البرمجي التالي كيفية طلب طرق بديلة ثم رسم الطرق على خريطة.
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();
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();
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>
</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>تجربة عيّنة
اعتبارات عند طلب مسارات بديلة
عند طلب مسارات بديلة، يجب مراعاة ما يلي:
- يمكنك طلب طرق بديلة للطرق التي لا تتضمّن نقاط توقّف وسيطة. لا يؤدي طلب مسارات بديلة عندما يحدّد المسار نقاط طريق وسيطة إلى حدوث خطأ. ومع ذلك، لا يتم عرض طرق بديلة.
- تحتوي الاستجابة على ثلاثة مسارات بديلة كحدّ أقصى. ومع ذلك، قد لا تتوفّر طرق بديلة في بعض الأحيان، وبالتالي لن يتضمّن الرد سوى المسار التلقائي.
- بسبب المعالجة الإضافية المطلوبة لاحتساب المسارات البديلة، قد يؤدي طلب مسارات بديلة إلى زيادة وقت استجابة واجهة برمجة التطبيقات.
طلب مسارات بديلة
لطلب مسارات بديلة، اضبط قيمة computeAlternativeRoutes على true في طلب 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. };
للحصول على المسارات، كرِّر مصفوفة المسارات (على سبيل المثال، 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); }