รับเมทริกซ์เส้นทาง

นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)

เมทริกซ์เส้นทางคืออาร์เรย์ 2 มิติของข้อมูลเส้นทาง โดยแถวจะสอดคล้องกับต้นทางและคอลัมน์จะสอดคล้องกับปลายทาง เมื่อระบุรายการต้นทางและ ปลายทางแล้ว คลาสเมทริกซ์เส้นทางจะคำนวณระยะทางและระยะเวลาของเส้นทางที่เริ่มต้น ที่ต้นทางแต่ละแห่งและสิ้นสุดที่ปลายทางแต่ละแห่ง ใช้คลาสเมทริกซ์เส้นทางเพื่อคำนวณ ระยะทางและระยะเวลาของเส้นทางสำหรับต้นทางและปลายทางหลายรายการ

ดูซอร์สโค้ดตัวอย่างที่สมบูรณ์

ตัวอย่างนี้แสดงวิธีใช้คลาสเมทริกซ์เส้นทางเพื่อคำนวณระยะทางและระยะเวลา สำหรับการเดินทางระหว่างต้นทางและปลายทางหลายแห่ง

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

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

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

ลองใช้ตัวอย่าง

ขีดจำกัดของคำขอ

computeRouteMatrix วิธีการนี้บังคับใช้ขีดจำกัดคำขอต่อไปนี้ สำหรับจุดอ้างอิงโดยใช้อินสแตนซ์ที่อยู่หรือสถานที่ และสำหรับรายการ รายการคือเส้นทาง ระหว่างต้นทางและปลายทางแต่ละแห่งในเมทริกซ์เส้นทาง ดังนั้นจำนวนรายการจึงเท่ากับจำนวน ต้นทางคูณด้วยจำนวนปลายทาง ตัวอย่างเช่น หากคุณมีต้นทาง 10 แห่งและปลายทาง 10 แห่ง คุณจะมีรายการ 100 รายการ ดังนี้

  • จำนวนรายการต้องไม่เกิน 625 รายการสำหรับเส้นทางที่ไม่ได้เป็นเส้นทาง TRANSIT
  • หากคุณระบุTRANSITเส้นทาง จำนวนรายการต้องไม่เกิน 100 รายการ
  • หากคุณระบุ TRAFFIC_AWARE_OPTIMAL จำนวนสินค้าต้องไม่เกิน 100 รายการ
  • หากคุณระบุต้นทางหรือปลายทางโดยใช้ที่อยู่หรืออินสแตนซ์ของสถานที่ คุณจะระบุได้สูงสุด 50 รายการด้วยวิธีนี้

ดูรายละเอียดเพิ่มเติมได้ที่รับเส้นทางขนส่งสาธารณะ

ตัวอย่างคำขอเมทริกซ์เส้นทาง

ตัวอย่างต่อไปนี้แสดง ComputeRouteMatrixRequest ตัวอย่างนี้ จะทำสิ่งต่อไปนี้

  • แสดงการระบุอาร์เรย์ของจุดอ้างอิงต้นทาง 2 จุดและจุดอ้างอิงปลายทาง 2 จุด เมธอด จะคำนวณเส้นทางจากต้นทางแต่ละแห่งไปยังปลายทางแต่ละแห่ง ดังนั้นการตอบกลับจึงมีเส้นทาง 4 เส้น
    ในอาร์เรย์ องค์ประกอบแรกจะอยู่ที่ดัชนี 0 องค์ประกอบที่สองจะอยู่ที่ดัชนี 1 และต่อไปเรื่อยๆ
  • ระบุช่องที่จะแสดงผล ในตัวอย่างนี้ คำขอได้รับการกำหนดค่าให้แสดงผล durationMillis, distanceMeters และ condition สำหรับ แต่ละเส้นทาง

TypeScript

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

JavaScript

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

การตอบกลับมีเส้นทางที่เป็นไปได้ 4 เส้นทางสำหรับชุดค่าผสมของจุดแวะพักต้นทางและปลายทางทั้งหมด ดังที่แสดงในตัวอย่างต่อไปนี้ 

"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 ที่เกี่ยวข้องในอาร์เรย์ 2 มิติ เช่น RouteMatrixItem ที่อธิบายเส้นทางที่คำนวณจากต้นทางที่ดัชนี 1 และปลายทาง 0 ในคำขอจะอยู่ในองค์ประกอบที่ 2 ของอาร์เรย์ RouteMatrix.rows และองค์ประกอบที่ 1 ของอาร์เรย์ 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];

เลือกช่องที่จะแสดง

เมื่อขอเมทริกซ์เส้นทาง คุณต้องใช้มาสก์ฟิลด์เพื่อระบุข้อมูลที่การตอบกลับควรแสดง

การใช้ Field Mask ยังช่วยให้มั่นใจได้ว่าคุณจะไม่ขอข้อมูลที่ไม่จำเป็น ซึ่งจะช่วยลดเวลาในการตอบสนองและหลีกเลี่ยงการแสดงข้อมูลที่ระบบของคุณไม่ต้องการ

ระบุรายการฟิลด์ที่ต้องการโดยตั้งค่าพร็อพเพอร์ตี้ ComputeRoutesMatrixRequest.fields ดังที่แสดงในข้อมูลโค้ดต่อไปนี้ 

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

กำหนดว่าจะใช้มาสก์ฟิลด์ใด

วิธีระบุช่องที่ต้องการใช้และสร้างมาสก์ของช่องสำหรับช่องเหล่านั้นมีดังนี้

  1. ขอทุกฟิลด์โดยใช้มาสก์ฟิลด์ของ ['*']
  2. ดูลำดับชั้นของฟิลด์ในคลาส RouteMatrixItem สำหรับฟิลด์ที่คุณต้องการ

  3. สร้างมาสก์ฟิลด์โดยใช้ลำดับชั้นของฟิลด์ที่แสดงใน ขั้นตอนก่อนหน้าโดยใช้รูปแบบนี้

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

เช่น สำหรับ RouteMatrixItem นี้

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

หากต้องการแสดงเฉพาะฟิลด์ tollInfo สำหรับ RouteMatrixItem ฟิลด์มาสก์จะเป็นดังนี้

fields: ['travelAdvisory.tollInfo']

หากต้องการขออัตราการใช้น้ำมันโดยประมาณแทน ฟิลด์มาสก์จะเป็นดังนี้

fields: ['travelAdvisory.fuelConsumptionMicroliters']

หากต้องการขอทั้ง 2 อย่าง ฟิลด์มาสก์จะเป็นดังนี้

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

และหากต้องการขอคำแนะนำด้านการเดินทางทั้งหมด ฟิลด์มาสก์จะเป็นดังนี้ 

fields: ['travelAdvisory']

ขอเมทริกซ์เส้นทางขนส่งสาธารณะ

รับเมทริกซ์เส้นทางขนส่งสาธารณะที่ใช้ตัวเลือกขนส่งสาธารณะที่มีให้บริการใน ภูมิภาค ตัวเลือกการเดินทางอาจรวมถึงรถประจำทาง รถไฟใต้ดิน และรถไฟ เป็นต้น วิธีขอ เมทริกซ์เส้นทางขนส่งสาธารณะ

  • ตั้งค่า travelMode เป็น TRANSIT
  • ขอฟิลด์ travelAdvisory

ดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางขนส่งสาธารณะ