Recupero di una matrice di route

Sviluppatori dello Spazio economico europeo (SEE)

Se il tuo indirizzo di fatturazione si trova nello Spazio economico europeo, a partire dall'8 luglio 2025, i Termini di servizio di Google Maps Platform per il SEE si applicheranno al tuo utilizzo dei Servizi. La funzionalità varia in base alla regione. Scopri di più.

Una matrice delle rotte è un array bidimensionale di informazioni sulle rotte, in cui le righe corrispondono alle origini e le colonne alle destinazioni. Data una lista di origini e destinazioni, la classe Route Matrix calcola la distanza e la durata di un percorso che inizia in ogni origine e termina in ogni destinazione. Utilizza la classe Route Matrix per calcolare la distanza e la durata di un percorso per più origini e destinazioni.

Visualizza il codice sorgente dell'esempio completo

Questo esempio mostra come utilizzare la classe Route Matrix per calcolare le distanze e le durate per gli spostamenti tra più origini e destinazioni.

TypeScript

// Initialize and add the map.
let map;
let markers: google.maps.marker.AdvancedMarkerElement[] = [];
let center = { lat: 51.55, lng: -1.8 };

async function initMap(): Promise<void> {
  //  Request the needed libraries.
  //@ts-ignore
  const [{Map}, {Place}, {AdvancedMarkerElement, PinElement}, {RouteMatrix}] = await Promise.all([
    google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,
    google.maps.importLibrary('marker') as Promise<google.maps.MarkerLibrary>,
    google.maps.importLibrary('routes') as Promise<google.maps.RoutesLibrary>
  ]);

  const bounds = new google.maps.LatLngBounds();

  map = new Map(document.getElementById('map') as HTMLElement, {
    zoom: 8,
    center: center,
    mapId: 'DEMO_MAP_ID',
  });

  // Build the request using Place instances.
  const origin1 = new Place({
    id: "ChIJ83WZp86p2EcRbMrkYqGncBQ", // Greenwich, London, UK
  });
  const origin2 = new Place({
    id: "ChIJCSkVvleJc0gR8HHaTGpajKc", // Southampton, UK
  });
  const destinationA = new Place({
    id: "ChIJYdizgWaDcUgRH9eaSy6y5I4", // Bristol, UK
  });
  const destinationB = new Place({
    id: "ChIJ9VPsNNQCbkgRDmeGZdsGNBQ", // Cardiff, UK
  });

  await Promise.all([
    origin1.fetchFields({ fields: ['location', 'displayName']}),
    origin2.fetchFields({ fields: ['location', 'displayName']}),
    destinationA.fetchFields({ fields: ['location', 'displayName']}),
    destinationB.fetchFields({ fields: ['location', 'displayName']}),
  ]);

  const request = {
    origins: [origin1, origin2], 
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    units: google.maps.UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
  };

  // Show the request.
  (document.getElementById("request") as HTMLDivElement).innerText =
    JSON.stringify(request, null, 2);

  // Get the RouteMatrix response.
  const response = await RouteMatrix.computeRouteMatrix(request); 

  // Show the response.
  (document.getElementById("response") as HTMLDivElement).innerText =
    JSON.stringify(response, null, 2);

  // Add markers for the origins.
  for (const origin of request.origins) {
    if (origin.location) {
      const pin = new PinElement({
        //@ts-ignore
        glyphText: "O",
        glyphColor: "white",
        background: "#137333",
        borderColor: "white",
      });
      const marker = new AdvancedMarkerElement({
        map,
        position: origin.location,
        content: pin.element,
        title: `Origin: ${origin.displayName}`,
      });
      markers.push(marker);
      bounds.extend(origin.location);
    }
  }

  // Add markers for the destinations.
  for (let i = 0; i < request.destinations.length; i++) {
    const destination = request.destinations[i];
    if (destination.location) {
      const pin = new PinElement({
        //@ts-ignore
        glyphText: "D",
        glyphColor: "white",
        background: "#C5221F",
        borderColor: "white",
      });

      const marker = new AdvancedMarkerElement({
        map,
        position: destination.location,
        content: pin.element,
        title: `Destination: ${destination.displayName}`,
      });

      markers.push(marker);
      bounds.extend(destination.location);
    }
  }

  // Fit the map to the bounds of all markers.
  map.fitBounds(bounds);
}

initMap();
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

// Initialize and add the map.
let map;
let markers = [];
let center = { lat: 51.55, lng: -1.8 };
async function initMap() {
    //  Request the needed libraries.
    //@ts-ignore
    const [{ Map }, { Place }, { AdvancedMarkerElement, PinElement }, { RouteMatrix }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes')
    ]);
    const bounds = new google.maps.LatLngBounds();
    map = new Map(document.getElementById('map'), {
        zoom: 8,
        center: center,
        mapId: 'DEMO_MAP_ID',
    });
    // Build the request using Place instances.
    const origin1 = new Place({
        id: "ChIJ83WZp86p2EcRbMrkYqGncBQ", // Greenwich, London, UK
    });
    const origin2 = new Place({
        id: "ChIJCSkVvleJc0gR8HHaTGpajKc", // Southampton, UK
    });
    const destinationA = new Place({
        id: "ChIJYdizgWaDcUgRH9eaSy6y5I4", // Bristol, UK
    });
    const destinationB = new Place({
        id: "ChIJ9VPsNNQCbkgRDmeGZdsGNBQ", // Cardiff, UK
    });
    await Promise.all([
        origin1.fetchFields({ fields: ['location', 'displayName'] }),
        origin2.fetchFields({ fields: ['location', 'displayName'] }),
        destinationA.fetchFields({ fields: ['location', 'displayName'] }),
        destinationB.fetchFields({ fields: ['location', 'displayName'] }),
    ]);
    const request = {
        origins: [origin1, origin2],
        destinations: [destinationA, destinationB],
        travelMode: 'DRIVING',
        units: google.maps.UnitSystem.METRIC,
        fields: ['distanceMeters', 'durationMillis', 'condition'],
    };
    // Show the request.
    document.getElementById("request").innerText =
        JSON.stringify(request, null, 2);
    // Get the RouteMatrix response.
    const response = await RouteMatrix.computeRouteMatrix(request);
    // Show the response.
    document.getElementById("response").innerText =
        JSON.stringify(response, null, 2);
    // Add markers for the origins.
    for (const origin of request.origins) {
        if (origin.location) {
            const pin = new PinElement({
                //@ts-ignore
                glyphText: "O",
                glyphColor: "white",
                background: "#137333",
                borderColor: "white",
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                content: pin.element,
                title: `Origin: ${origin.displayName}`,
            });
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }
    // Add markers for the destinations.
    for (let i = 0; i < request.destinations.length; i++) {
        const destination = request.destinations[i];
        if (destination.location) {
            const pin = new PinElement({
                //@ts-ignore
                glyphText: "D",
                glyphColor: "white",
                background: "#C5221F",
                borderColor: "white",
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: destination.location,
                content: pin.element,
                title: `Destination: ${destination.displayName}`,
            });
            markers.push(marker);
            bounds.extend(destination.location);
        }
    }
    // Fit the map to the bounds of all markers.
    map.fitBounds(bounds);
}
initMap();
index.js

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}

#sidebar {
  flex-direction: column;
}
style.css

HTML

<html>
  <head>
    <title>Route matrix</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div id="sidebar">
        <h3 style="flex-grow: 0">Request</h3>
        <pre style="flex-grow: 1" id="request"></pre>
        <h3 style="flex-grow: 0">Response</h3>
        <pre style="flex-grow: 1" id="response"></pre>
      </div>
    </div>
    <!-- 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

Prova campione

JSFiddle.net

Limiti per le richieste

Il metodo computeRouteMatrix applica i seguenti limiti alle richieste per i waypoint che utilizzano istanze di indirizzi o luoghi e per gli elementi. Gli elementi sono i percorsi tra ogni origine e destinazione in una matrice di itinerari, quindi il numero di elementi è il numero di origini moltiplicato per il numero di destinazioni. Ad esempio, se hai 10 origini e 10 destinazioni, hai 100 elementi:

• Il numero di elementi non può superare 625 per i percorsi che non sono percorsi TRANSIT.
• Se specifichi una TRANSIT route, il numero di elementi non può superare 100.
• Se specifichi TRAFFIC_AWARE_OPTIMAL, il numero di elementi non può superare 100.
• Se specifichi origini o destinazioni utilizzando indirizzi o istanze di Place, puoi specificarne fino a 50 in totale.

Per maggiori dettagli, vedi Ottenere un itinerario con i mezzi pubblici.

Esempio di richiesta della matrice di itinerari

L'esempio seguente mostra un ComputeRouteMatrixRequest. Questo esempio esegue le seguenti operazioni:

• Mostra la specifica di un array di due waypoint di partenza e due di destinazione. Il metodo calcola un percorso da ogni origine a ogni destinazione, quindi la risposta contiene quattro percorsi.
  Nell'array, il primo elemento si trova all'indice 0, il secondo all'indice 1 e così via.
• Specifica i campi da restituire. In questo esempio, la richiesta è configurata per restituire durationMillis, distanceMeters e condition per ogni route.

TypeScript

const request = {
  origins: [origin1, origin2], 
  destinations: [destinationA, destinationB],
  travelMode: 'DRIVING',
  units: google.maps.UnitSystem.METRIC,
  fields: ['distanceMeters', 'durationMillis', 'condition'],
};
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const request = {
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    units: google.maps.UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
};
index.js

La risposta contiene i quattro itinerari possibili per la combinazione di tutti i waypoint di origine e destinazione, come mostrato nell'esempio seguente:

"matrix": {
  "rows": [
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 202587,
          "durationMillis": 10040000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 252734,
          "durationMillis": 12240000
        }
      ]
    },
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 166135,
          "durationMillis": 6596000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 216282,
          "durationMillis": 8797000
        }
      ]
    }
  ]
}
    

Identifica ogni percorso nel risultato utilizzando l'indice di partenza e destinazione per trovare il RouteMatrixItem corrispondente nell'array bidimensionale. Ad esempio, l'elemento RouteMatrixItem che descrive l'itinerario calcolato dall'origine all'indice 1 e dalla destinazione 0 nella richiesta si troverebbe nel secondo elemento dell'array RouteMatrix.rows e nel primo elemento dell'array RouteMatrixRow.items.

Il seguente snippet di codice mostra come identificare RouteMatrixItem per trovare il percorso per un'origine e una destinazione specifiche:

// Find the route for origin 'x' and destination 'y'.
const {matrix} = await RouteMatrix.computeRouteMatrix(request);
const myRouteMatrixItem = matrix.rows[x].items[y];
    

Scegli i campi da restituire

Quando richiedi una matrice di itinerari, devi utilizzare una maschera di campo per specificare le informazioni che la risposta deve restituire.

L'utilizzo di una maschera di campo garantisce inoltre di non richiedere dati non necessari, il che a sua volta contribuisce a ridurre la latenza della risposta ed evita di restituire informazioni che il sistema non richiede.

Specifica l'elenco dei campi di cui hai bisogno impostando la proprietà ComputeRoutesMatrixRequest.fields, come mostrato nel seguente snippet:

fields: ['durationMillis', 'distanceMeters', 'condition'],
    

Determinare quali maschere di campo utilizzare

Ecco come puoi determinare quali campi utilizzare e creare le maschere dei campi per questi campi:

1. Richiedi tutti i campi utilizzando una maschera di campo ['*'].
   Attenzione: anche se puoi utilizzare questa maschera di campo con caratteri jolly durante lo sviluppo per determinare i campi necessari, non utilizzarla in produzione. La richiesta di tutti i campi in produzione comporta costi più elevati e tempi di risposta più lunghi. Il costo potrebbe anche aumentare in modo imprevisto man mano che vengono aggiunte funzionalità più avanzate, poiché questa maschera del campo le includerà automaticamente. Richiedi invece solo i campi necessari per ridurre al minimo i costi e il tempo di risposta alle richieste.
2. Esamina la gerarchia dei campi nella classe RouteMatrixItem per i campi che ti interessano.

3. Crea le maschere dei campi utilizzando la gerarchia dei campi mostrata nel passaggio precedente, utilizzando questo formato:

   topLevelField[.secondLevelField][.thirdLevelField][...]

Ad esempio, per questo RouteMatrixItem:

  "travelAdvisory": {
    "fuelConsumptionMicroliters": 0,
    "tollInfo": {
      "estimatedPrices": [
        {
          "currencyCode": "USD",
          "units": 4,
          "nanos": 400000000
        }
      ]
    }
  },
    

Se vuoi restituire solo il campo tollInfo per RouteMatrixItem, la maschera del campo è la seguente:

fields: ['travelAdvisory.tollInfo']

Se invece vuoi richiedere il consumo di carburante stimato, la maschera del campo è la seguente:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

Se vuoi richiedere entrambi, la maschera di campo è la seguente:

fields: ['travelAdvisory.fuelConsumptionMicroliters', 'travelAdvisory.tollInfo']

Se vuoi richiedere il set completo di avvisi di viaggio, la maschera del campo è la seguente:

fields: ['travelAdvisory']

La gerarchia delle proprietà è disponibile solo per RouteMatrix.computeRouteMatrix e non è supportata per Route.computeRoutes.

Richiedere una matrice di itinerari del trasporto pubblico

Ottieni una matrice di itinerari di transito che utilizza le opzioni di trasporto pubblico disponibili nella regione. Le opzioni di trasporto pubblico possono includere autobus, metropolitana e treni, tra gli altri. Per richiedere una matrice di itinerari del trasporto pubblico:

• Imposta travelMode su TRANSIT
• Richiedi il campo travelAdvisory.

Scopri di più sugli itinerari del trasporto pubblico.