Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ماتریس مسیر را دریافت کنید

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

ماتریس مسیر، آرایه‌ای دوبعدی از اطلاعات مسیر است که در آن ردیف‌ها مربوط به مبدأها و ستون‌ها مربوط به مقصدها هستند. با داشتن لیستی از مبدأها و مقصدها، کلاس Route Matrix مسافت و مدت زمان یک مسیر را که از هر مبدأ شروع و به هر مقصد ختم می‌شود، محاسبه می‌کند. از کلاس Route Matrix برای محاسبه مسافت و مدت زمان یک مسیر برای چندین مبدأ و مقصد استفاده کنید.

کد منبع کامل مثال را ببینید

این مثال نحوه استفاده از کلاس Route Matrix را برای محاسبه مسافت و مدت زمان سفر بین چندین مبدا و مقصد نشان می‌دهد.

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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

سی‌اس‌اس

/*
 * 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>
  <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

نمونه را امتحان کنید

JSFiddle.net

محدودیت‌های درخواست

متد computeRouteMatrix محدودیت‌های درخواست زیر را برای نقاط مسیر با استفاده از نمونه‌های آدرس یا مکان و برای اقلام اعمال می‌کند. اقلام، مسیرهای بین هر مبدأ و مقصد در یک ماتریس مسیر هستند، بنابراین تعداد اقلام برابر با تعداد مبدأها ضربدر تعداد مقصدها است. به عنوان مثال، اگر 10 مبدأ و 10 مقصد داشته باشید، 100 کالا خواهید داشت:

تعداد اقلام برای مسیرهایی که مسیرهای TRANSIT نیستند، نمی‌تواند از ۶۲۵ تجاوز کند.
اگر یک مسیر TRANSIT مشخص کنید ، تعداد اقلام نمی‌تواند از ۱۰۰ تجاوز کند.
اگر TRAFFIC_AWARE_OPTIMAL را مشخص کنید ، تعداد موارد نمی‌تواند از ۱۰۰ بیشتر شود.
اگر مبداها یا مقصدها را با استفاده از آدرس‌ها یا نمونه‌های مکان مشخص کنید ، می‌توانید حداکثر تا ۵۰ مورد را به این روش مشخص کنید.

برای جزئیات بیشتر، به «دریافت مسیر حمل و نقل» مراجعه کنید.

مثال درخواست ماتریس مسیر

مثال زیر یک ComputeRouteMatrixRequest را نشان می‌دهد. این مثال موارد زیر را انجام می‌دهد:

نشان می‌دهد که آرایه‌ای از دو نقطه مبدا و دو نقطه مقصد مشخص شده است. این متد مسیری را از هر مبدا به هر مقصد محاسبه می‌کند، بنابراین پاسخ شامل چهار مسیر است.
در آرایه، عنصر اول دارای اندیس ۰، عنصر دوم دارای اندیس ۱ و به همین ترتیب است.
فیلدهایی که باید برگردانده شوند را مشخص می‌کند. در این مثال، درخواست طوری پیکربندی شده است که برای هر مسیر، durationMillis ، distanceMeters و condition را برگرداند.

تایپ اسکریپت

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

جاوا اسکریپت

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

پاسخ شامل چهار مسیر ممکن برای ترکیب تمام نقاط مسیر مبدا و مقصد است، همانطور که در مثال زیر نشان داده شده است:

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

با استفاده از اندیس مبدا و مقصد، هر مسیر در نتیجه را شناسایی کنید تا RouteMatrixItem مربوطه را در آرایه دوبعدی پیدا کنید. برای مثال، RouteMatrixItem که مسیر محاسبه شده از مبدا در اندیس ۱ و مقصد ۰ در درخواست را توصیف می‌کند، در عنصر دوم آرایه RouteMatrix.rows و عنصر اول آرایه RouteMatrixRow.items قرار خواهد گرفت.

قطعه کد زیر نحوه شناسایی RouteMatrixItem را برای یافتن مسیر برای یک مبدا و مقصد خاص نشان می‌دهد:

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

فیلدهایی را برای بازگشت انتخاب کنید

وقتی یک ماتریس مسیر درخواست می‌کنید، باید از یک ماسک فیلد برای مشخص کردن اطلاعاتی که پاسخ باید برگرداند، استفاده کنید.

استفاده از ماسک فیلد همچنین تضمین می‌کند که شما داده‌های غیرضروری درخواست نمی‌کنید، که به نوبه خود به کاهش تأخیر پاسخ کمک می‌کند و از بازگشت اطلاعاتی که سیستم شما به آنها نیاز ندارد، جلوگیری می‌کند.

لیست فیلدهای مورد نیاز خود را با تنظیم ویژگی ComputeRoutesMatrixRequest.fields ، همانطور که در قطعه کد زیر نشان داده شده است، مشخص کنید:

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

تعیین کنید که از چه ماسک‌های میدانی استفاده کنید

در اینجا نحوه تعیین فیلدهایی که می‌خواهید استفاده کنید و ساخت ماسک فیلد برای آنها آورده شده است:

درخواست همه فیلدها با استفاده از ماسک فیلد ['*'] .
احتیاط: اگرچه می‌توانید در مرحله توسعه از این ماسک فیلد wildcard برای تعیین فیلدهای مورد نیاز خود استفاده کنید، اما در محیط عملیاتی از آن استفاده نکنید. درخواست همه فیلدها در محیط عملیاتی منجر به هزینه‌های بالاتر و زمان پاسخ طولانی‌تر می‌شود. همچنین ممکن است با اضافه شدن ویژگی‌های پیشرفته‌تر، هزینه شما به طور غیرمنتظره‌ای افزایش یابد، زیرا این ماسک فیلد به طور خودکار آنها را شامل می‌شود. در عوض، فقط فیلدهایی را که نیاز دارید درخواست کنید تا هزینه‌های خود را به حداقل برسانید و زمان پاسخ درخواست را افزایش دهید.
برای فیلدهای مورد نظر خود ، به سلسله مراتب فیلدها در کلاس RouteMatrixItem نگاهی بیندازید.
با استفاده از سلسله مراتب فیلدهای نشان داده شده در مرحله قبل، و با استفاده از این قالب، ماسک‌های فیلد خود را بسازید :
```
topLevelField[.secondLevelField][.thirdLevelField][...]
```

برای مثال، برای این RouteMatrixItem :

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

اگر می‌خواهید فقط فیلد tollInfo را برای RouteMatrixItem برگردانید، ماسک فیلد شما به شرح زیر است:

fields: ['travelAdvisory.tollInfo']

اگر به جای آن می‌خواهید میزان مصرف سوخت تخمینی را درخواست کنید، ماسک میدانی شما به شرح زیر است:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

اگر می‌خواهید هر دو را درخواست کنید، ماسک فیلد شما به شرح زیر است:

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

و اگر می‌خواهید مجموعه کامل توصیه‌های سفر را درخواست کنید، ماسک میدانی شما به شرح زیر است:

fields: ['travelAdvisory']

سلسله مراتب ویژگی‌ها فقط برای RouteMatrix.computeRouteMatrix در دسترس است و برای Route.computeRoutes پشتیبانی نمی‌شود.

درخواست ماتریس مسیر حمل و نقل عمومی

یک ماتریس مسیر حمل و نقل عمومی دریافت کنید که از گزینه‌های حمل و نقل عمومی موجود در منطقه استفاده کند. گزینه‌های حمل و نقل عمومی ممکن است شامل اتوبوس، مترو و قطار و موارد دیگر باشد. برای درخواست ماتریس مسیر حمل و نقل عمومی:

travelMode روی TRANSIT تنظیم کنید
فیلد travelAdvisory درخواست کنید.

درباره مسیرهای ترانزیت بیشتر بدانید.

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

کد منبع کامل مثال را ببینید

این مثال نحوه استفاده از کلاس Route Matrix را برای محاسبه مسافت و مدت زمان سفر بین چندین مبدا و مقصد نشان می‌دهد.

تایپ اسکریپت

// 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

جاوا اسکریپت

// 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

سی‌اس‌اس

/*
 * 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>
  <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

نمونه را امتحان کنید

JSFiddle.net

محدودیت‌های درخواست

تعداد اقلام برای مسیرهایی که مسیرهای TRANSIT نیستند، نمی‌تواند از ۶۲۵ تجاوز کند.
اگر یک مسیر TRANSIT مشخص کنید ، تعداد اقلام نمی‌تواند از ۱۰۰ تجاوز کند.
اگر TRAFFIC_AWARE_OPTIMAL را مشخص کنید ، تعداد موارد نمی‌تواند از ۱۰۰ بیشتر شود.
اگر مبداها یا مقصدها را با استفاده از آدرس‌ها یا نمونه‌های مکان مشخص کنید ، می‌توانید حداکثر تا ۵۰ مورد را به این روش مشخص کنید.

برای جزئیات بیشتر، به «دریافت مسیر حمل و نقل» مراجعه کنید.

مثال درخواست ماتریس مسیر

مثال زیر یک ComputeRouteMatrixRequest را نشان می‌دهد. این مثال موارد زیر را انجام می‌دهد:

نشان می‌دهد که آرایه‌ای از دو نقطه مبدا و دو نقطه مقصد مشخص شده است. این متد مسیری را از هر مبدا به هر مقصد محاسبه می‌کند، بنابراین پاسخ شامل چهار مسیر است.
در آرایه، عنصر اول دارای اندیس ۰، عنصر دوم دارای اندیس ۱ و به همین ترتیب است.
فیلدهایی که باید برگردانده شوند را مشخص می‌کند. در این مثال، درخواست طوری پیکربندی شده است که برای هر مسیر، durationMillis ، distanceMeters و condition را برگرداند.

تایپ اسکریپت

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

جاوا اسکریپت

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

پاسخ شامل چهار مسیر ممکن برای ترکیب تمام نقاط مسیر مبدا و مقصد است، همانطور که در مثال زیر نشان داده شده است:

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

قطعه کد زیر نحوه شناسایی RouteMatrixItem را برای یافتن مسیر برای یک مبدا و مقصد خاص نشان می‌دهد:

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

فیلدهایی را برای بازگشت انتخاب کنید

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

تعیین کنید که از چه ماسک‌های میدانی استفاده کنید

در اینجا نحوه تعیین فیلدهایی که می‌خواهید استفاده کنید و ساخت ماسک فیلد برای آنها آورده شده است:

درخواست همه فیلدها با استفاده از ماسک فیلد ['*'] .
احتیاط: اگرچه می‌توانید در مرحله توسعه از این ماسک فیلد wildcard برای تعیین فیلدهای مورد نیاز خود استفاده کنید، اما در محیط عملیاتی از آن استفاده نکنید. درخواست همه فیلدها در محیط عملیاتی منجر به هزینه‌های بالاتر و زمان پاسخ طولانی‌تر می‌شود. همچنین ممکن است با اضافه شدن ویژگی‌های پیشرفته‌تر، هزینه شما به طور غیرمنتظره‌ای افزایش یابد، زیرا این ماسک فیلد به طور خودکار آنها را شامل می‌شود. در عوض، فقط فیلدهایی را که نیاز دارید درخواست کنید تا هزینه‌های خود را به حداقل برسانید و زمان پاسخ درخواست را افزایش دهید.
برای فیلدهای مورد نظر خود ، به سلسله مراتب فیلدها در کلاس RouteMatrixItem نگاهی بیندازید.
با استفاده از سلسله مراتب فیلدهای نشان داده شده در مرحله قبل، و با استفاده از این قالب، ماسک‌های فیلد خود را بسازید :
```
topLevelField[.secondLevelField][.thirdLevelField][...]
```

برای مثال، برای این RouteMatrixItem :

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

اگر می‌خواهید فقط فیلد tollInfo را برای RouteMatrixItem برگردانید، ماسک فیلد شما به شرح زیر است:

fields: ['travelAdvisory.tollInfo']

اگر به جای آن می‌خواهید میزان مصرف سوخت تخمینی را درخواست کنید، ماسک میدانی شما به شرح زیر است:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

اگر می‌خواهید هر دو را درخواست کنید، ماسک فیلد شما به شرح زیر است:

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

و اگر می‌خواهید مجموعه کامل توصیه‌های سفر را درخواست کنید، ماسک میدانی شما به شرح زیر است:

fields: ['travelAdvisory']

سلسله مراتب ویژگی‌ها فقط برای RouteMatrix.computeRouteMatrix در دسترس است و برای Route.computeRoutes پشتیبانی نمی‌شود.

درخواست ماتریس مسیر حمل و نقل عمومی

travelMode روی TRANSIT تنظیم کنید
فیلد travelAdvisory درخواست کنید.

درباره مسیرهای ترانزیت بیشتر بدانید.

ماتریس مسیر را دریافت کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

کد منبع کامل مثال را ببینید

تایپ اسکریپت

جاوا اسکریپت

سی‌اس‌اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

محدودیت‌های درخواست

مثال درخواست ماتریس مسیر

تایپ اسکریپت

جاوا اسکریپت

فیلدهایی را برای بازگشت انتخاب کنید

تعیین کنید که از چه ماسک‌های میدانی استفاده کنید

درخواست ماتریس مسیر حمل و نقل عمومی

کد منبع کامل مثال را ببینید

تایپ اسکریپت

جاوا اسکریپت

سی‌اس‌اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

محدودیت‌های درخواست

مثال درخواست ماتریس مسیر

تایپ اسکریپت

جاوا اسکریپت

فیلدهایی را برای بازگشت انتخاب کنید

تعیین کنید که از چه ماسک‌های میدانی استفاده کنید

درخواست ماتریس مسیر حمل و نقل عمومی

ماتریس مسیر را دریافت کنید