Rota matrisi alma

Avrupa Ekonomik Alanı (AEA) geliştiricileri

Rota matrisi, rota bilgilerinin iki boyutlu bir dizisidir. Satırlar başlangıç noktalarına, sütunlar ise varış noktalarına karşılık gelir. Başlangıç ve varış noktalarının listesi verildiğinde, Route Matrix sınıfı her başlangıç noktasında başlayıp her varış noktasında biten bir rotanın mesafesini ve süresini hesaplar. Birden fazla başlangıç ve hedef için bir rotanın mesafesini ve süresini hesaplamak üzere Route Matrix sınıfını kullanın.

Tam örnek kaynak kodunu görüntüleme

Bu örnekte, birden fazla başlangıç ve hedef arasındaki seyahat mesafelerini ve sürelerini hesaplamak için Route Matrix sınıfının nasıl kullanılacağı gösterilmektedir.

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();

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();

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;
}

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>

Örneği deneyin

İstek sınırları

computeRouteMatrix yöntemi, adres veya yer örnekleri kullanan ara noktalar ve öğeler için aşağıdaki istek sınırlarını uygular. Öğeler, bir rota matrisindeki her başlangıç ve varış noktası arasındaki rotalardır. Bu nedenle, öğe sayısı başlangıç noktası sayısı ile varış noktası sayısının çarpımıdır. Örneğin, 10 kaynak ve 10 hedefiniz varsa 100 öğeniz vardır:

  • TRANSIT rotaları olmayan rotalarda öğe sayısı 625'i aşamaz.
  • TRANSIT rotası belirtirseniz öğe sayısı 100'ü aşamaz.
  • TRAFFIC_AWARE_OPTIMAL değerini belirtirseniz öğe sayısı 100'ü aşamaz.
  • Adresleri veya yer örneklerini kullanarak kaynak ya da hedef belirtirseniz toplamda 50 tane belirtebilirsiniz.

Daha fazla bilgi için Toplu taşıma rotası alma başlıklı makaleyi inceleyin.

Örnek rota matrisi isteği

Aşağıdaki örnekte ComputeRouteMatrixRequest gösterilmektedir. Bu örnekte aşağıdaki işlemler yapılır:

  • İki başlangıç ve iki hedef ara nokta dizisi belirtmeyi gösterir. Yöntem, her başlangıç noktasından her varış noktasına bir rota hesaplar. Bu nedenle, yanıtta dört rota bulunur.
    Dizideki ilk öğe 0 dizinindedir, ikinci öğe 1 dizinindedir ve bu şekilde devam eder.
  • Döndürülecek alanları belirtir. Bu örnekte, istek her rota için durationMillis, distanceMeters ve condition değerlerini döndürecek şekilde yapılandırılmıştır.

TypeScript

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

JavaScript

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

Yanıtta, aşağıdaki örnekte gösterildiği gibi tüm kaynak ve hedef ara noktaların kombinasyonu için dört olası rota yer alır:

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

Sonuçtaki her rotayı, 2 boyutlu dizideki ilgili RouteMatrixItem değerini bulmak için başlangıç ve varış noktası dizinini kullanarak tanımlayın. Örneğin, istekte dizin 1'deki başlangıç noktasından ve hedef 0'dan hesaplanan rotayı açıklayan RouteMatrixItem, RouteMatrix.rows dizisinin 2. öğesinde ve RouteMatrixRow.items dizisinin 1. öğesinde yer alır.

Aşağıdaki kod snippet'inde, belirli bir başlangıç ve hedef için rotayı bulmak üzere RouteMatrixItem öğesinin nasıl tanımlanacağı gösterilmektedir:

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

Döndürülecek alanları seçin

Rota matrisi istediğinizde, yanıtın hangi bilgileri döndürmesi gerektiğini belirtmek için alan maskesi kullanmanız gerekir.

Alan maskesi kullanmak, gereksiz veriler istememenizi de sağlar. Bu da yanıt gecikmesini azaltır ve sisteminizin ihtiyaç duymadığı bilgilerin döndürülmesini önler.

Aşağıdaki snippet'te gösterildiği gibi ComputeRoutesMatrixRequest.fields özelliğini ayarlayarak ihtiyacınız olan alanların listesini belirtin:

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

Hangi alan maskelerinin kullanılacağını belirleme

Hangi alanları kullanmak istediğinizi belirlemek ve bu alanlar için alan maskeleri oluşturmak üzere aşağıdaki adımları uygulayabilirsiniz:

  1. ['*'] alan maskesini kullanarak tüm alanları isteyin.
  2. İstediğiniz alanlar için RouteMatrixItem sınıfındaki alanların hiyerarşisine bakın.
  3. Önceki adımda gösterilen alanların hiyerarşisini kullanarak alan maskelerinizi oluşturun. Şu biçimi kullanın:

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

Örneğin, şu RouteMatrixItem için:

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

RouteMatrixItem için yalnızca tollInfo alanını döndürmek istiyorsanız alan maskeniz aşağıdaki gibi olmalıdır:

fields: ['travelAdvisory.tollInfo']

Bunun yerine tahmini yakıt tüketimini talep etmek istiyorsanız alan maskeniz aşağıdaki gibi olmalıdır:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

İkisini de istemek istiyorsanız alan maskeniz aşağıdaki gibi olmalıdır:

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

Seyahat uyarılarının tamamını talep etmek istiyorsanız alan maskeniz aşağıdaki gibi olmalıdır:

fields: ['travelAdvisory']

Toplu taşıma rotası matrisi isteğinde bulunma

Bölgedeki toplu taşıma seçeneklerini kullanan bir toplu taşıma rotası matrisi alın. Toplu taşıma seçenekleri arasında otobüs, metro ve tren gibi araçlar yer alabilir. Toplu taşıma rotası matrisi istemek için:

  • travelMode değerini TRANSIT olarak ayarlayın.
  • travelAdvisory alanını isteyin.

Toplu taşıma güzergahları hakkında daha fazla bilgi edinin.