Rota matrisi alma

Avrupa Ekonomik Alanı'ndaki (AEA) geliştiriciler

Rota matrisi, satırların başlangıç noktalarına, sütunların ise varış noktalarına karşılık geldiği iki boyutlu bir rota bilgisi dizisidir. Route Matrix sınıfı, başlangıç ve varış noktalarının listesi verildiğinde her bir başlangıç noktasında başlayıp her bir 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.

Eksiksiz örnek kaynak kodunu inceleyin

Bu örnekte, birden fazla başlangıç ve varış noktası 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: google.maps.Map;
const markers: google.maps.marker.AdvancedMarkerElement[] = [];
const center = { lat: 51.55, lng: -1.8 };

async function init(): Promise<void> {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map')!, {
        zoom: 8,
        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 destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request: google.maps.routes.ComputeRouteMatrixRequest = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: 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 origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

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

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

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

void init();

JavaScript

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

async function init() {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map'), {
        zoom: 8,
        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 destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: 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 origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

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

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

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

void init();

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>
        <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: "GOOGLE_MAPS_API_KEY"
            });
        </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>
    </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ının varış noktası sayısıyla çarpılmasıyla elde edilir. Örneğin, 10 başlangıç noktanız ve 10 varış noktanız varsa 100 öğeniz olur:

  • TRANSIT rotası olmayan rotalar için öğe sayısı 625'i aşamaz.
  • Bir TRANSIT rotası belirtirseniz öğe sayısı 100'ü aşamaz.
  • TRAFFIC_AWARE_OPTIMAL değerini belirtirseniz öğe sayısı 100'ü aşamaz.
  • Başlangıç veya varış noktalarını adresleri ya da Place örneklerini kullanarak belirtirseniz bu şekilde toplamda en fazla 50 nokta 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 bir ComputeRouteMatrixRequest gösterilmektedir. Bu örnekte aşağıdakiler yapılır:

  • İki başlangıç ve iki varış noktası içeren bir dizinin nasıl belirtileceğini gösterir. Yöntem, her başlangıç noktasından her hedef noktaya bir rota hesaplar. Bu nedenle, yanıtta dört rota bulunur.
    Dizideki ilk öğe 0 dizininde, ikinci öğe 1 dizininde yer alır ve bu şekilde devam eder.
  • Döndürülecek alanları belirtir. Bu örnekte istek, her rota için durationMillis, distanceMeters ve condition döndürecek şekilde yapılandırılmıştır.

TypeScript

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

JavaScript

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

Yanıt, aşağıdaki örnekte gösterildiği gibi tüm başlangıç ve hedef yol noktalarının kombinasyonu için dört olası rotayı içerir: 

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

2D dizideki ilgili RouteMatrixItem değerini bulmak için başlangıç ve hedef dizinini kullanarak sonuçtaki her rotayı tanımlayın. Örneğin, istekte dizin 1'deki başlangıç noktasından ve 0 hedefinden 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 varış noktası 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 veri istememenizi de sağlar. Bu da yanıt gecikmesine yardımcı olur 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

Kullanmak istediğiniz alanları nasıl belirleyeceğiniz ve bunlar için alan maskelerini nasıl oluşturacağınız aşağıda açıklanmıştır:

  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. Bu biçimi kullanın:

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

Örneğin, bu RouteMatrixItem için:

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

Yalnızca RouteMatrixItem için tollInfo alanını döndürmek istiyorsanız alan maskeniz aşağıdaki gibidir:

fields: ['travelAdvisory.tollInfo']

Bunun yerine tahmini yakıt tüketimini istemek istiyorsanız alan maskeniz aşağıdaki gibidir:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

Her ikisini de istemek istiyorsanız alan maskeniz aşağıdaki gibi olur:

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

Seyahat tavsiyelerinin tamamını talep etmek istiyorsanız alan maskeniz aşağıdaki gibi olur:

fields: ['travelAdvisory']

Toplu taşıma rotası matrisi isteme

Bölgede mevcut olan 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 seçenekler yer alabilir. Toplu taşıma rota matrisi istemek için:

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

Toplu taşıma rotaları hakkında daha fazla bilgi edinin.