Mendapatkan matriks rute

Developer Wilayah Ekonomi Eropa (EEA)

Jika alamat penagihan Anda berada di Wilayah Ekonomi Eropa, mulai 8 Juli 2025, Persyaratan Layanan Google Maps Platform EEA akan berlaku untuk penggunaan Layanan oleh Anda. Fungsi bervariasi menurut wilayah. Pelajari lebih lanjut.

Matriks rute adalah array dua dimensi informasi rute, dengan baris yang sesuai dengan asal dan kolom yang sesuai dengan tujuan. Dengan daftar asal dan tujuan, class Route Matrix menghitung jarak dan durasi rute yang dimulai di setiap asal dan berakhir di setiap tujuan. Gunakan class Route Matrix untuk menghitung jarak dan durasi rute untuk beberapa tempat asal dan tujuan.

Lihat contoh kode sumber yang lengkap

Contoh ini menunjukkan cara menggunakan class Route Matrix untuk menghitung jarak dan durasi perjalanan antara beberapa tempat asal dan tujuan.

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

Catatan: Baca panduan cara menggunakan TypeScript dan 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

Catatan: JavaScript dikompilasi dari cuplikan 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

Mencoba Contoh

JSFiddle.net

Batas permintaan

Metode computeRouteMatrix memberlakukan batas permintaan berikut untuk titik jalan menggunakan instance Alamat atau Tempat, dan untuk item. Item adalah rute antara setiap asal dan tujuan dalam matriks rute, sehingga jumlah item adalah jumlah asal dikalikan dengan jumlah tujuan. Misalnya, jika Anda memiliki 10 asal dan 10 tujuan, Anda memiliki 100 item:

• Jumlah item tidak boleh melebihi 625 untuk rute yang bukan rute TRANSIT.
• Jika Anda menentukan rute TRANSIT, jumlah item tidak boleh melebihi 100.
• Jika Anda menentukan TRAFFIC_AWARE_OPTIMAL, jumlah item tidak boleh melebihi 100.
• Jika Anda menentukan asal atau tujuan menggunakan alamat atau instance Place, Anda dapat menentukan hingga total 50 dengan cara ini.

Untuk mengetahui detail tambahan, lihat Mendapatkan rute transportasi umum.

Contoh permintaan matriks rute

Contoh berikut menunjukkan ComputeRouteMatrixRequest. Contoh ini melakukan hal berikut:

• Menunjukkan penentuan array dua titik jalan asal dan dua titik jalan tujuan. Metode menghitung rute dari setiap asal ke setiap tujuan sehingga respons berisi empat rute.
  Dalam array, elemen pertama berada pada indeks 0, elemen kedua berada pada indeks 1, dan seterusnya.
• Menentukan kolom yang akan ditampilkan. Dalam contoh ini, permintaan dikonfigurasi untuk menampilkan durationMillis, distanceMeters, dan condition untuk setiap rute.

TypeScript

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

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

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

Respons berisi empat kemungkinan rute untuk kombinasi semua titik jalan asal dan tujuan, seperti yang ditunjukkan dalam contoh berikut:

"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
        }
      ]
    }
  ]
}
    

Identifikasi setiap rute dalam hasil menggunakan indeks asal dan tujuan untuk menemukan RouteMatrixItem yang sesuai dalam array 2D. Misalnya, RouteMatrixItem yang menjelaskan rute yang dihitung dari asal pada indeks 1 dan tujuan 0 dalam permintaan akan berada di elemen ke-2 array RouteMatrix.rows dan elemen ke-1 array RouteMatrixRow.items.

Cuplikan kode berikut menunjukkan cara mengidentifikasi RouteMatrixItem untuk menemukan rute untuk asal dan tujuan tertentu:

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

Pilih kolom yang akan ditampilkan

Saat meminta matriks rute, Anda harus menggunakan mask kolom untuk menentukan informasi yang harus ditampilkan oleh respons.

Penggunaan mask kolom juga memastikan Anda tidak meminta data yang tidak perlu, yang pada gilirannya membantu latensi respons dan menghindari pengembalian informasi yang tidak diperlukan sistem Anda.

Tentukan daftar kolom yang Anda butuhkan dengan menyetel properti ComputeRoutesMatrixRequest.fields, seperti yang ditunjukkan dalam cuplikan berikut:

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

Menentukan mask kolom yang akan digunakan

Berikut cara menentukan kolom yang ingin Anda gunakan, dan membuat mask kolom untuk kolom tersebut:

1. Minta semua kolom menggunakan mask kolom ['*'].
   Perhatian: Meskipun Anda dapat menggunakan mask kolom karakter pengganti ini selama pengembangan untuk menentukan kolom yang Anda butuhkan, jangan gunakan mask kolom ini dalam produksi. Meminta semua kolom dalam produksi akan menghasilkan biaya yang lebih tinggi dan waktu respons yang lebih lama. Biaya Anda juga dapat meningkat secara tidak terduga saat fitur yang lebih canggih ditambahkan, karena mask kolom ini akan menyertakannya secara otomatis. Sebagai gantinya, minta hanya kolom yang Anda perlukan untuk meminimalkan biaya dan waktu respons permintaan.
2. Lihat hierarki kolom di class RouteMatrixItem untuk kolom yang Anda inginkan.

3. Buat mask kolom Anda menggunakan hierarki kolom yang ditampilkan di langkah sebelumnya, menggunakan format ini:

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

Misalnya, untuk RouteMatrixItem ini:

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

Jika Anda hanya ingin menampilkan kolom tollInfo untuk RouteMatrixItem, mask kolom Anda adalah sebagai berikut:

fields: ['travelAdvisory.tollInfo']

Jika Anda ingin meminta perkiraan konsumsi bahan bakar, mask kolom Anda adalah sebagai berikut:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

Jika Anda ingin meminta keduanya, mask kolom Anda adalah sebagai berikut:

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

Jika Anda ingin meminta kumpulan lengkap saran perjalanan, mask kolom Anda adalah sebagai berikut:

fields: ['travelAdvisory']

Hierarki properti hanya tersedia untuk RouteMatrix.computeRouteMatrix, dan tidak didukung untuk Route.computeRoutes.

Meminta matriks rute transportasi umum

Dapatkan matriks rute transportasi umum yang menggunakan opsi transportasi umum yang tersedia di wilayah. Opsi transportasi umum dapat mencakup bus, kereta bawah tanah, dan kereta api, serta opsi lainnya. Untuk meminta matriks rute transit:

• Setel travelMode menjadi TRANSIT
• Minta kolom travelAdvisory.

Pelajari lebih lanjut rute transportasi umum.