এই অংশে দেখানো হয়েছে কীভাবে অন-ডিমান্ড ট্রিপ বা নির্ধারিত কাজের জন্য একটি যানবাহনকে ট্র্যাক করতে জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করতে হয়।
একটি যানবাহন ট্র্যাক করতে, আপনাকে এই ধাপগুলো অনুসরণ করতে হবে:
- লাইব্রেরিটি লোড করুন এবং ম্যাপ ভিউটি চালু করুন।
- গাড়ির অবস্থান এবং মানচিত্রের দৃশ্য প্রদান করুন।
- ইভেন্টগুলির জন্য নজর রাখুন এবং ত্রুটিগুলি সামলান।
- ট্র্যাকিং বন্ধ করুন
লাইব্রেরিটি লোড করুন এবং ম্যাপ ভিউটি চালু করুন।
আপনার ওয়েব পেজে একটি মানচিত্রে আপনার ফ্লিট অপারেশনগুলি প্রদর্শন করতে, এমন একটি স্ক্রিপ্ট ব্যবহার করুন যা আপনার API কী ব্যবহার করে একটি মানচিত্র কল করে। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে HTML থেকে এটি করতে হয়:
ইউআরএল উৎস : আপনার এপিআই কী ব্যবহার করে একটি মানচিত্রের অনুরোধ জানাতে গুগল ম্যাপস এপিআই-কে কল করে।
callbackপ্যারামিটার : এপিআই কলটি ফেরত দেওয়ার পরinitMapফাংশনটি চালায়।librariesপ্যারামিটার : ফ্লিট ট্র্যাকিং লাইব্রেরি লোড করে।deferঅ্যাট্রিবিউট : এপিআই লোড হওয়ার সময় এটি ব্রাউজারকে আপনার পেজের বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
গাড়ির অবস্থান এবং মানচিত্রের দৃশ্য প্রদান করুন।
একটি যানবাহন ট্র্যাক করা শুরু করতে, আপনাকে নিম্নলিখিত বিভাগগুলিতে বর্ণিত পদ্ধতি অনুসারে একটি ভেহিকেল লোকেশন প্রোভাইডার ইনস্ট্যানশিয়েট করতে হবে এবং ভেহিকেল আইডি ব্যবহার করে একটি ম্যাপ ভিউ ইনিশিয়ালাইজ করতে হবে।
একটি যানবাহন অবস্থান প্রদানকারী ইনস্ট্যানশিয়েট করুন
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরিতে ফ্লিট ইঞ্জিন এপিআই-এর জন্য একটি লোকেশন প্রোভাইডার অন্তর্ভুক্ত রয়েছে। নিম্নলিখিত উদাহরণগুলিতে দেখানো অনুযায়ী, আপনার প্রজেক্ট আইডি এবং টোকেন ফেচারের একটি রেফারেন্স ব্যবহার করে এটিকে ইনস্ট্যানশিয়েট করুন।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
মানচিত্র দৃশ্য শুরু করুন
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পর, ম্যাপ ভিউটি ইনিশিয়ালাইজ করুন এবং 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);
ইভেন্টগুলির জন্য নজর রাখুন এবং ত্রুটিগুলি সামলান।
একবার কোনো যানবাহনের গতিবিধি অনুসরণ করা শুরু করলে, আপনাকে মানচিত্রে সেটির অগ্রগতি হালনাগাদ করতে হবে এবং পথ চলার সময় উদ্ভূত ত্রুটিগুলোও সামাল দিতে হবে।
যানবাহনের ঘটনাগুলির জন্য শুনুন
অন-ডিমান্ড ট্রিপ বা নির্ধারিত কাজের জন্য কোনো যানবাহনের অগ্রগতি ট্র্যাক করতে, আপনাকে চেঞ্জ ইভেন্টগুলো লিসেন করতে হবে।
আপনি লোকেশন প্রোভাইডার ব্যবহার করে vehicle বা deliveryVehicle অবজেক্ট থেকে মেটা তথ্য পুনরুদ্ধার করেন। এই মেটা তথ্যের মধ্যে গাড়ির পরবর্তী পিকআপ বা ড্রপঅফের আগে পৌঁছানোর আনুমানিক সময় (ETA) এবং অবশিষ্ট দূরত্ব অন্তর্ভুক্ত থাকে। মেটা তথ্যে কোনো পরিবর্তন ঘটলে লোকেশন প্রোভাইডারে একটি আপডেট ইভেন্ট সক্রিয় হয়।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই পরিবর্তন ইভেন্টগুলি শোনা যায়।
চাহিদা অনুযায়ী ভ্রমণ
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
ত্রুটিগুলি পরিচালনা করুন
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পর, ম্যাপ ভিউটি ইনিশিয়ালাইজ করুন এবং 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.vehicleId = '';
টাইপস্ক্রিপ্ট
locationProvider.vehicleId = '';
নির্ধারিত কাজ
জাভাস্ক্রিপ্ট
locationProvider.deliveryVehicleId = '';
টাইপস্ক্রিপ্ট
locationProvider.deliveryVehicleId = '';
মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারীকে সরান
নিম্নলিখিত উদাহরণে দেখানো হয়েছে কীভাবে ম্যাপ ভিউ থেকে একটি লোকেশন প্রোভাইডার সরানো যায়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
টাইপস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);