একটি রুট ম্যাট্রিক্স হল রুট তথ্যের একটি দ্বি-মাত্রিক অ্যারে, যেখানে সারিগুলি উৎপত্তিস্থলের সাথে এবং কলামগুলি গন্তব্যস্থলের সাথে সঙ্গতিপূর্ণ। উৎপত্তিস্থল এবং গন্তব্যস্থলের একটি তালিকা দেওয়া হলে, রুট ম্যাট্রিক্স ক্লাস প্রতিটি উৎপত্তিস্থল থেকে শুরু করে প্রতিটি গন্তব্যস্থলে শেষ হওয়া রুটের দূরত্ব এবং সময়কাল গণনা করে। একাধিক উৎপত্তিস্থল এবং গন্তব্যস্থলের জন্য একটি রুটের দূরত্ব এবং সময়কাল গণনা করতে রুট ম্যাট্রিক্স ক্লাস ব্যবহার করুন।
সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন
এই উদাহরণে দেখানো হয়েছে কিভাবে রুট ম্যাট্রিক্স ক্লাস ব্যবহার করে একাধিক উৎস এবং গন্তব্যস্থলের মধ্যে ভ্রমণের দূরত্ব এবং সময়কাল গণনা করতে হয়।
টাইপস্ক্রিপ্ট
// 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();
জাভাস্ক্রিপ্ট
// 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();
সিএসএস
/* * 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>
<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>নমুনা চেষ্টা করুন
অনুরোধের সীমা
computeRouteMatrix পদ্ধতি ঠিকানা বা স্থানের উদাহরণ ব্যবহার করে ওয়েপয়েন্ট এবং আইটেমগুলির জন্য নিম্নলিখিত অনুরোধ সীমা প্রয়োগ করে। আইটেমগুলি হল একটি রুট ম্যাট্রিক্সে প্রতিটি অরিজিন এবং গন্তব্যের মধ্যে রুট, তাই আইটেমের সংখ্যা হল অরিজিনের সংখ্যা গুণিতক গন্তব্যের সংখ্যা। উদাহরণস্বরূপ, যদি আপনার 10টি অরিজিন এবং 10টি গন্তব্য থাকে, তাহলে আপনার 100টি আইটেম থাকবে:
- যেসব রুট
TRANSITরুট নয়, তাদের জন্য আইটেমের সংখ্যা ৬২৫ এর বেশি হতে পারবে না। - যদি আপনি একটি
TRANSITরুট নির্দিষ্ট করেন , তাহলে আইটেমের সংখ্যা ১০০ এর বেশি হতে পারবে না। - যদি আপনি
TRAFFIC_AWARE_OPTIMALনির্দিষ্ট করেন , তাহলে আইটেমের সংখ্যা ১০০ এর বেশি হতে পারবে না। - যদি আপনি ঠিকানা বা Place instances ব্যবহার করে উৎপত্তি বা গন্তব্যস্থল নির্দিষ্ট করেন , তাহলে আপনি এইভাবে মোট ৫০টি পর্যন্ত উল্লেখ করতে পারবেন।
আরও তথ্যের জন্য, একটি ট্রানজিট রুট পান দেখুন।
রুট ম্যাট্রিক্স অনুরোধের উদাহরণ
নিচের উদাহরণটি একটি ComputeRouteMatrixRequest দেখায়। এই উদাহরণটি নিম্নলিখিত কাজ করে:
- দুটি উৎস এবং দুটি গন্তব্যস্থলের ওয়েপয়েন্টের একটি অ্যারে নির্দিষ্ট করে দেখায়। পদ্ধতিটি প্রতিটি উৎস থেকে প্রতিটি গন্তব্যস্থলে একটি রুট গণনা করে তাই প্রতিক্রিয়াটিতে চারটি রুট থাকে।
অ্যারেতে, প্রথম উপাদানটি 0 এর সূচকে থাকে, দ্বিতীয়টি 1 এর সূচকে থাকে, এবং আরও অনেক কিছু। - রিটার্ন করার জন্য ক্ষেত্রগুলি নির্দিষ্ট করে। এই উদাহরণে, অনুরোধটি প্রতিটি রুটের জন্য
durationMillis,distanceMetersএবংconditionরিটার্ন করার জন্য কনফিগার করা হয়েছে।
টাইপস্ক্রিপ্ট
const request = { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', units: google.maps.UnitSystem.METRIC, fields: ['distanceMeters', 'durationMillis', 'condition'], };
জাভাস্ক্রিপ্ট
const request = { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', units: google.maps.UnitSystem.METRIC, fields: ['distanceMeters', 'durationMillis', 'condition'], };
নিম্নলিখিত উদাহরণে দেখানো হয়েছে, প্রতিক্রিয়াটিতে সমস্ত উৎপত্তি এবং গন্তব্যস্থলের সমন্বয়ের জন্য চারটি সম্ভাব্য রুট রয়েছে:
"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 অ্যারেতে সংশ্লিষ্ট RouteMatrixItem খুঁজে বের করতে origin এবং destination index ব্যবহার করুন। উদাহরণস্বরূপ, অনুরোধে index 1 এবং destination 0-এ origin থেকে গণনা করা রুট বর্ণনাকারী RouteMatrixItem RouteMatrix.rows অ্যারের 2য় উপাদান এবং RouteMatrixRow.items অ্যারের 1ম উপাদানে থাকবে।
নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে 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'],
কোন ফিল্ড মাস্ক ব্যবহার করবেন তা নির্ধারণ করুন
আপনি কোন ক্ষেত্রগুলি ব্যবহার করতে চান তা কীভাবে নির্ধারণ করবেন এবং তাদের জন্য ক্ষেত্র মুখোশ তৈরি করবেন তা এখানে দেওয়া হল:
-
['*']এর ফিল্ড মাস্ক ব্যবহার করে সমস্ত ফিল্ডের অনুরোধ করুন । - আপনার পছন্দের ক্ষেত্রগুলির জন্য
RouteMatrixItemক্লাসে ক্ষেত্রগুলির শ্রেণিবিন্যাস দেখুন । পূর্ববর্তী ধাপে দেখানো ক্ষেত্রের অনুক্রম ব্যবহার করে আপনার ক্ষেত্রের মুখোশ তৈরি করুন , এই বিন্যাসটি ব্যবহার করে:
topLevelField[.secondLevelField][.thirdLevelField][...]
উদাহরণস্বরূপ, এই RouteMatrixItem জন্য:
"travelAdvisory": { "fuelConsumptionMicroliters": 0, "tollInfo": { "estimatedPrices": [ { "currencyCode": "USD", "units": 4, "nanos": 400000000 } ] } },
যদি আপনি RouteMatrixItem এর জন্য শুধুমাত্র tollInfo ক্ষেত্রটি ফেরত দিতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.tollInfo']
আপনি যদি আনুমানিক জ্বালানি খরচের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.fuelConsumptionMicroliters']
যদি আপনি উভয়ের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.fuelConsumptionMicroliters', 'travelAdvisory.tollInfo']
আর যদি আপনি ভ্রমণ সংক্রান্ত সম্পূর্ণ পরামর্শের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory']
একটি ট্রানজিট রুট ম্যাট্রিক্সের অনুরোধ করুন
এই অঞ্চলে উপলব্ধ গণপরিবহন বিকল্পগুলি ব্যবহার করে এমন একটি ট্রানজিট রুট ম্যাট্রিক্স পান। ট্রানজিট বিকল্পগুলির মধ্যে বাস, সাবওয়ে এবং ট্রেন সহ অন্যান্য বিকল্প অন্তর্ভুক্ত থাকতে পারে। ট্রানজিট রুট ম্যাট্রিক্সের জন্য অনুরোধ করতে:
-
travelModeকেTRANSITএ সেট করুন -
travelAdvisoryক্ষেত্রটি অনুরোধ করুন।
পরিবহন রুট সম্পর্কে আরও জানুন।
,একটি রুট ম্যাট্রিক্স হল রুট তথ্যের একটি দ্বি-মাত্রিক অ্যারে, যেখানে সারিগুলি উৎপত্তিস্থলের সাথে এবং কলামগুলি গন্তব্যস্থলের সাথে সঙ্গতিপূর্ণ। উৎপত্তিস্থল এবং গন্তব্যস্থলের একটি তালিকা দেওয়া হলে, রুট ম্যাট্রিক্স ক্লাস প্রতিটি উৎপত্তিস্থল থেকে শুরু করে প্রতিটি গন্তব্যস্থলে শেষ হওয়া রুটের দূরত্ব এবং সময়কাল গণনা করে। একাধিক উৎপত্তিস্থল এবং গন্তব্যস্থলের জন্য একটি রুটের দূরত্ব এবং সময়কাল গণনা করতে রুট ম্যাট্রিক্স ক্লাস ব্যবহার করুন।
সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন
এই উদাহরণে দেখানো হয়েছে কিভাবে রুট ম্যাট্রিক্স ক্লাস ব্যবহার করে একাধিক উৎস এবং গন্তব্যস্থলের মধ্যে ভ্রমণের দূরত্ব এবং সময়কাল গণনা করতে হয়।
টাইপস্ক্রিপ্ট
// 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();
জাভাস্ক্রিপ্ট
// 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();
সিএসএস
/* * 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>
<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>নমুনা চেষ্টা করুন
অনুরোধের সীমা
computeRouteMatrix পদ্ধতি ঠিকানা বা স্থানের উদাহরণ ব্যবহার করে ওয়েপয়েন্ট এবং আইটেমগুলির জন্য নিম্নলিখিত অনুরোধ সীমা প্রয়োগ করে। আইটেমগুলি হল একটি রুট ম্যাট্রিক্সে প্রতিটি অরিজিন এবং গন্তব্যের মধ্যে রুট, তাই আইটেমের সংখ্যা হল অরিজিনের সংখ্যা গুণিতক গন্তব্যের সংখ্যা। উদাহরণস্বরূপ, যদি আপনার 10টি অরিজিন এবং 10টি গন্তব্য থাকে, তাহলে আপনার 100টি আইটেম থাকবে:
- যেসব রুট
TRANSITরুট নয়, তাদের জন্য আইটেমের সংখ্যা ৬২৫ এর বেশি হতে পারবে না। - যদি আপনি একটি
TRANSITরুট নির্দিষ্ট করেন , তাহলে আইটেমের সংখ্যা ১০০ এর বেশি হতে পারবে না। - যদি আপনি
TRAFFIC_AWARE_OPTIMALনির্দিষ্ট করেন , তাহলে আইটেমের সংখ্যা ১০০ এর বেশি হতে পারবে না। - যদি আপনি ঠিকানা বা Place instances ব্যবহার করে উৎপত্তি বা গন্তব্যস্থল নির্দিষ্ট করেন , তাহলে আপনি এইভাবে মোট ৫০টি পর্যন্ত উল্লেখ করতে পারবেন।
আরও তথ্যের জন্য, একটি ট্রানজিট রুট পান দেখুন।
রুট ম্যাট্রিক্স অনুরোধের উদাহরণ
নিচের উদাহরণটি একটি ComputeRouteMatrixRequest দেখায়। এই উদাহরণটি নিম্নলিখিত কাজ করে:
- দুটি উৎস এবং দুটি গন্তব্যস্থলের ওয়েপয়েন্টের একটি অ্যারে নির্দিষ্ট করে দেখায়। পদ্ধতিটি প্রতিটি উৎস থেকে প্রতিটি গন্তব্যস্থলে একটি রুট গণনা করে তাই প্রতিক্রিয়াটিতে চারটি রুট থাকে।
অ্যারেতে, প্রথম উপাদানটি 0 এর সূচকে থাকে, দ্বিতীয়টি 1 এর সূচকে থাকে, এবং আরও অনেক কিছু। - রিটার্ন করার জন্য ক্ষেত্রগুলি নির্দিষ্ট করে। এই উদাহরণে, অনুরোধটি প্রতিটি রুটের জন্য
durationMillis,distanceMetersএবংconditionরিটার্ন করার জন্য কনফিগার করা হয়েছে।
টাইপস্ক্রিপ্ট
const request = { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', units: google.maps.UnitSystem.METRIC, fields: ['distanceMeters', 'durationMillis', 'condition'], };
জাভাস্ক্রিপ্ট
const request = { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', units: google.maps.UnitSystem.METRIC, fields: ['distanceMeters', 'durationMillis', 'condition'], };
নিম্নলিখিত উদাহরণে দেখানো হয়েছে, প্রতিক্রিয়াটিতে সমস্ত উৎপত্তি এবং গন্তব্যস্থলের সমন্বয়ের জন্য চারটি সম্ভাব্য রুট রয়েছে:
"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 অ্যারেতে সংশ্লিষ্ট RouteMatrixItem খুঁজে বের করতে origin এবং destination index ব্যবহার করুন। উদাহরণস্বরূপ, অনুরোধে index 1 এবং destination 0-এ origin থেকে গণনা করা রুট বর্ণনাকারী RouteMatrixItem RouteMatrix.rows অ্যারের 2য় উপাদান এবং RouteMatrixRow.items অ্যারের 1ম উপাদানে থাকবে।
নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে 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'],
কোন ফিল্ড মাস্ক ব্যবহার করবেন তা নির্ধারণ করুন
আপনি কোন ক্ষেত্রগুলি ব্যবহার করতে চান তা কীভাবে নির্ধারণ করবেন এবং তাদের জন্য ক্ষেত্র মুখোশ তৈরি করবেন তা এখানে দেওয়া হল:
-
['*']এর ফিল্ড মাস্ক ব্যবহার করে সমস্ত ফিল্ডের অনুরোধ করুন । - আপনার পছন্দের ক্ষেত্রগুলির জন্য
RouteMatrixItemক্লাসে ক্ষেত্রগুলির শ্রেণিবিন্যাস দেখুন । পূর্ববর্তী ধাপে দেখানো ক্ষেত্রের অনুক্রম ব্যবহার করে আপনার ক্ষেত্রের মুখোশ তৈরি করুন , এই বিন্যাসটি ব্যবহার করে:
topLevelField[.secondLevelField][.thirdLevelField][...]
উদাহরণস্বরূপ, এই RouteMatrixItem জন্য:
"travelAdvisory": { "fuelConsumptionMicroliters": 0, "tollInfo": { "estimatedPrices": [ { "currencyCode": "USD", "units": 4, "nanos": 400000000 } ] } },
যদি আপনি RouteMatrixItem এর জন্য শুধুমাত্র tollInfo ক্ষেত্রটি ফেরত দিতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.tollInfo']
আপনি যদি আনুমানিক জ্বালানি খরচের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.fuelConsumptionMicroliters']
যদি আপনি উভয়ের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory.fuelConsumptionMicroliters', 'travelAdvisory.tollInfo']
আর যদি আপনি ভ্রমণ সংক্রান্ত সম্পূর্ণ পরামর্শের জন্য অনুরোধ করতে চান, তাহলে আপনার ফিল্ড মাস্কটি নিম্নরূপ:
fields: ['travelAdvisory']
একটি ট্রানজিট রুট ম্যাট্রিক্সের অনুরোধ করুন
এই অঞ্চলে উপলব্ধ গণপরিবহন বিকল্পগুলি ব্যবহার করে এমন একটি ট্রানজিট রুট ম্যাট্রিক্স পান। ট্রানজিট বিকল্পগুলির মধ্যে বাস, সাবওয়ে এবং ট্রেন সহ অন্যান্য বিকল্প অন্তর্ভুক্ত থাকতে পারে। ট্রানজিট রুট ম্যাট্রিক্সের জন্য অনুরোধ করতে:
-
travelModeকেTRANSITএ সেট করুন -
travelAdvisoryক্ষেত্রটি অনুরোধ করুন।
পরিবহন রুট সম্পর্কে আরও জানুন।