Маршрут по умолчанию, возвращаемый API маршрутов, обычно является самым быстрым маршрутом от начальной точки до конечной. При запросе альтернативных маршрутов API возвращает массив, содержащий до трех маршрутов, а также маршрут по умолчанию. Затем ваши клиенты могут выбрать наиболее подходящий для них маршрут.
См. полный пример исходного кода.
Приведенный ниже пример кода демонстрирует, как запросить альтернативные маршруты, а затем отобразить их на карте.
Машинопись
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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<gmp-map center="37.447646, -122.113878" zoom="10"></gmp-map>
</body>
</html>Попробуйте образец
Что следует учитывать при запросе альтернативных маршрутов
При запросе альтернативных маршрутов учитывайте следующее:
- Запросить альтернативные маршруты можно только для маршрутов без промежуточных точек. Запрос альтернативных маршрутов, если маршрут указывает промежуточные точки, не приводит к ошибке. Однако альтернативные маршруты не возвращаются.
- В ответе содержится максимум три альтернативных маршрута. Однако иногда альтернативных маршрутов нет, поэтому в ответе указывается только маршрут по умолчанию.
- Из-за дополнительной обработки, необходимой для расчета альтернативных маршрутов, запрос альтернативных маршрутов может увеличить время ответа API.
Запросить альтернативные маршруты
Чтобы запросить альтернативные маршруты, установите 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); }