এই বিভাগে দেখানো হয়েছে কীভাবে জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করে একটি ফ্লিট দেখা যায়। এই পদ্ধতিগুলো ধরে নেয় যে আপনি ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ করেছেন এবং একটি ম্যাপ লোড করেছেন। বিস্তারিত জানতে, “জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ করুন” দেখুন।
এই নথিতে একটি নৌবহর দেখার সময় আপনি নিম্নলিখিত বিষয়গুলি করতে পারেন তা আলোচনা করা হয়েছে:
- নৌবহরটির উপর নজরদারি শুরু করুন ।
- ইভেন্টগুলোর জন্য নজর রাখুন এবং ত্রুটিগুলো সামাল দিন ।
- ট্র্যাকিং বন্ধ করুন ।
- একাধিক গাড়ির বহর দেখার সময় একটি নির্দিষ্ট গাড়ির অবস্থান ট্র্যাক করুন ।
ফ্লিট ট্র্যাক করা শুরু করুন
একটি ফ্লিট ট্র্যাক করতে, আপনাকে একটি ফ্লিট লোকেশন প্রোভাইডার ইনস্ট্যানশিয়েট করতে হবে এবং নিম্নলিখিত বিভাগগুলিতে বর্ণিত পদ্ধতি অনুযায়ী ম্যাপ ভিউপোর্টের জন্য লোকেশন সীমাবদ্ধতা সেট করতে হবে।
একটি ফ্লিট অবস্থান প্রদানকারী ইনস্ট্যানশিয়েট করুন
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরিতে একটি লোকেশন প্রোভাইডার রয়েছে, যা ফ্লিট ইঞ্জিন থেকে একাধিক যানবাহন সংগ্রহ করে।
এটি ইনস্ট্যানশিয়েট করতে, এই ধাপগুলো অনুসরণ করুন:
আপনার প্রজেক্ট আইডি এবং টোকেন ফেচারের রেফারেন্স হিসেবে ব্যবহার করুন ।
একটি যানবাহন ফিল্টার কোয়েরি ব্যবহার করুন। এই কোয়েরিটি নিয়ন্ত্রণ করে যে ম্যাপে কোন যানবাহনগুলো প্রদর্শিত হবে। ফিল্টারটি ফ্লিট ইঞ্জিনে পাঠানো হয়।
- অন-ডিমান্ড পরিষেবাগুলির জন্য,
vehicleFilterব্যবহার করুন এবংListVehiclesRequest.filterপর্যালোচনা করুন। - নির্ধারিত কাজগুলির জন্য,
deliveryVehicleFilterব্যবহার করুন এবংListDeliveryVehiclesRequest.filterপর্যালোচনা করুন।
- অন-ডিমান্ড পরিষেবাগুলির জন্য,
যানবাহন প্রদর্শনের জন্য সীমানা এলাকা নির্ধারণ করুন । ম্যাপে যানবাহন প্রদর্শনের এলাকা সীমিত করতে
locationRestrictionব্যবহার করুন। এটি সেট না করা পর্যন্ত লোকেশন প্রোভাইডার সক্রিয় হয় না। আপনি কনস্ট্রাক্টরের মধ্যে অথবা কনস্ট্রাক্টরের পরে লোকেশন বাউন্ডস সেট করতে পারেন।মানচিত্র দৃশ্যটি প্রারম্ভিক করুন ।
নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে কিভাবে অন-ডিমান্ড এবং নির্ধারিত টাস্ক উভয় ক্ষেত্রেই একটি ফ্লিট লোকেশন প্রোভাইডার ইনস্ট্যানশিয়েট করতে হয়। এই উদাহরণগুলিতে আরও দেখানো হয়েছে কিভাবে লোকেশন প্রোভাইডারটিকে সক্রিয় করার জন্য কনস্ট্রাক্টরে ` locationRestriction ব্যবহার করতে হয়।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
কনস্ট্রাক্টরের পরে locationRestriction সেট করতে, নিচের জাভাস্ক্রিপ্ট উদাহরণে দেখানো অনুযায়ী আপনার কোডের পরবর্তী অংশে locationProvider.locationRestriction যোগ করুন।
// You can choose to not set locationRestriction in the constructor.
// In this case, the location provider *DOES NOT START* after this line, because
// no locationRestriction is set.
locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
... // not setting locationRestriction here
});
// You can then set the locationRestriction *after* the constructor.
// After this line, the location provider is active.
locationProvider.locationRestriction = {
north: 1,
east: 2,
south: 0,
west: 1,
};
ম্যাপ ভিউপোর্ট ব্যবহার করে অবস্থানের সীমাবদ্ধতা নির্ধারণ করুন
আপনি ম্যাপ ভিউতে বর্তমানে দৃশ্যমান এলাকার সাথে মিলিয়ে locationRestriction সীমানাও নির্ধারণ করতে পারেন।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
টাইপস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location provider will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
টাইপস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location provider will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
মানচিত্র দৃশ্য শুরু করুন
একবার লোকেশন প্রোভাইডারটি তৈরি হয়ে গেলে, একটিমাত্র যানবাহনকে অনুসরণ করার মতোই ম্যাপ ভিউটি ইনিশিয়ালাইজ করুন।
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পর, ম্যাপ ভিউটি ইনিশিয়ালাইজ করুন এবং HTML পেজে যোগ করুন। আপনার পেজে একটি <div> এলিমেন্ট থাকতে হবে, যার মধ্যে ম্যাপ ভিউটি থাকবে। নিচের উদাহরণগুলোতে <div> এলিমেন্টটির নাম map_canvas দেওয়া হয়েছে।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
ইভেন্টগুলির জন্য নজর রাখুন এবং ত্রুটিগুলি সামলান।
একবার আপনি ফ্লিটটিকে অনুসরণ করা শুরু করলে, আপনাকে ইভেন্টের পরিবর্তনগুলো পর্যবেক্ষণ করতে হবে এবং পরবর্তী বিভাগগুলোতে বর্ণিত পদ্ধতি অনুযায়ী উদ্ভূত যেকোনো ত্রুটি সামাল দিতে হবে।
পরিবর্তনের ঘটনাগুলির জন্য শুনুন
আপনি লোকেশন প্রোভাইডার ব্যবহার করে ভেহিকেল অবজেক্ট থেকে ফ্লিট সম্পর্কিত মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্যে কোনো পরিবর্তন হলে একটি আপডেট ইভেন্ট ট্রিগার হয়। মেটা তথ্যের মধ্যে গাড়ির বিভিন্ন বৈশিষ্ট্য, যেমন নেভিগেশন স্টেট, অবশিষ্ট দূরত্ব এবং কাস্টম অ্যাট্রিবিউট অন্তর্ভুক্ত থাকে।
বিস্তারিত জানতে নিম্নলিখিত বিষয়গুলো দেখুন:
নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে কীভাবে এই পরিবর্তন ইভেন্টগুলি শোনা যায়।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
ত্রুটির জন্য শুনুন
কোনো যানবাহনকে অনুসরণ করার সময় ঘটা ত্রুটিগুলোও আপনাকে শনাক্ত করতে ও সেগুলোর সমাধান করতে হবে। যানবাহনের তথ্য অনুরোধ করার ফলে অসিঙ্ক্রোনাসভাবে উদ্ভূত ত্রুটিগুলো এরর ইভেন্ট ট্রিগার করে।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই ইভেন্টগুলি শোনা যায় যাতে আপনি ত্রুটিগুলি পরিচালনা করতে পারেন।
জাভাস্ক্রিপ্ট
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
নৌবহরের উপর নজরদারি বন্ধ করুন
ফ্লিটের ট্র্যাকিং বন্ধ করতে, আপনাকে লোকেশন প্রোভাইডারের বাউন্ডস নাল (null) সেট করতে হবে এবং তারপরে নিম্নলিখিত বিভাগগুলিতে বর্ণিত পদ্ধতি অনুযায়ী ম্যাপ ভিউ থেকে লোকেশন প্রোভাইডারটি সরিয়ে ফেলতে হবে।
অবস্থান প্রদানকারীর সীমানা null-এ সেট করুন
লোকেশন প্রোভাইডারকে ফ্লিট ট্র্যাক করা থেকে বিরত রাখতে, লোকেশন প্রোভাইডারের বাউন্ডস নাল (null) সেট করুন।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
locationProvider.locationRestriction = null;
টাইপস্ক্রিপ্ট
locationProvider.locationRestriction = null;
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider.locationRestriction = null;
টাইপস্ক্রিপ্ট
locationProvider.locationRestriction = null;
মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারীকে সরান
নিম্নলিখিত উদাহরণে দেখানো হয়েছে কীভাবে ম্যাপ ভিউ থেকে একটি লোকেশন প্রোভাইডার সরানো যায়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
টাইপস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
ডেলিভারি ফ্লিট দেখার সময় একটি ডেলিভারি গাড়িকে ট্র্যাক করুন
আপনি যদি নির্ধারিত কাজের জন্য মোবিলিটি পরিষেবা ব্যবহার করেন, তাহলে আপনি একই ম্যাপ ভিউতে একটি ফ্লিট দেখার পাশাপাশি একটি নির্দিষ্ট ডেলিভারি গাড়ির রুট এবং আসন্ন কাজগুলোও দেখতে পারেন। এটি করার জন্য, একটি ডেলিভারি ফ্লিট লোকেশন প্রোভাইডার এবং একটি ডেলিভারি ভেহিকেল লোকেশন প্রোভাইডার উভয়ই ইনস্ট্যানশিয়েট করুন এবং উভয়কেই ম্যাপ ভিউতে যুক্ত করুন। ইনস্ট্যানশিয়েট করা হয়ে গেলে, ডেলিভারি ফ্লিট লোকেশন প্রোভাইডারটি ম্যাপে ডেলিভারি গাড়িগুলো দেখানো শুরু করে। নিম্নলিখিত উদাহরণগুলোতে দেখানো হয়েছে কীভাবে উভয় লোকেশন প্রোভাইডার ইনস্ট্যানশিয়েট করতে হয়:
জাভাস্ক্রিপ্ট
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
টাইপস্ক্রিপ্ট
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
ডেলিভারি গাড়ি ট্র্যাক করতে মার্কার কাস্টমাইজেশন ব্যবহার করুন।
ডেলিভারি গাড়ির ফ্লিট মার্কারে ক্লিক করার পর ডেলিভারি গাড়ির লোকেশন প্রোভাইডারকে সেটি ট্র্যাক করার সুযোগ দিতে, এই ধাপগুলো অনুসরণ করুন:
একটি মার্কার কাস্টমাইজ করুন এবং একটি ক্লিক অ্যাকশন যোগ করুন।
সদৃশ মার্কার প্রতিরোধ করতে মার্কারটি লুকান।
এই ধাপগুলোর উদাহরণ পরবর্তী বিভাগগুলোতে দেওয়া আছে।
একটি মার্কার কাস্টমাইজ করুন এবং ক্লিক অ্যাকশন যোগ করুন
জাভাস্ক্রিপ্ট
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
টাইপস্ক্রিপ্ট
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
ডুপ্লিকেট মার্কার প্রতিরোধ করতে মার্কারটি লুকান।
একই গাড়ির জন্য দুটি মার্কার রেন্ডার হওয়া আটকাতে ডেলিভারি গাড়ির অবস্থান প্রদানকারী থেকে মার্কারটি লুকান:
জাভাস্ক্রিপ্ট
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
টাইপস্ক্রিপ্ট
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};