এই বিভাগটি দেখায় কিভাবে একটি বহর দেখতে JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করতে হয়। এই পদ্ধতিগুলি অনুমান করে যে আপনি ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ করেছেন এবং একটি মানচিত্র লোড করেছেন। বিস্তারিত জানার জন্য, জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ দেখুন।
এই দস্তাবেজটি নিম্নলিখিত বিষয়গুলি নিয়ে আলোচনা করে যা আপনি একটি বহর দেখার সময় করতে পারেন:
- বহর ট্র্যাকিং শুরু করুন .
- ইভেন্টগুলির জন্য শুনুন এবং ত্রুটিগুলি পরিচালনা করুন ।
- ট্র্যাকিং বন্ধ করুন ।
- একটি বহর দেখার সময় একটি একক যানবাহন ট্র্যাক করুন ৷
বহর ট্র্যাকিং শুরু করুন
একটি ফ্লিট ট্র্যাক করতে, আপনাকে একটি ফ্লিট অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করতে হবে এবং নিম্নলিখিত বিভাগে বর্ণিত মানচিত্র ভিউপোর্টের জন্য অবস্থানের সীমাবদ্ধতা সেট করতে হবে।
একটি ফ্লিট অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন
JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরিতে একটি অবস্থান প্রদানকারী রয়েছে যা ফ্লিট ইঞ্জিন থেকে একাধিক যানবাহন নিয়ে আসে।
এটি ইনস্ট্যান্ট করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
আপনার প্রোজেক্ট আইডি ব্যবহার করুন সেইসাথে আপনার টোকেন ফেচারের একটি রেফারেন্স।
একটি যানবাহন ফিল্টার ক্যোয়ারী ব্যবহার করুন গাড়ির ফিল্টার ক্যোয়ারী মানচিত্রটি কোন যানবাহন প্রদর্শন করবে তা নিয়ন্ত্রণ করে। ফিল্টারটি ফ্লিট ইঞ্জিনে প্রেরণ করা হয়।
- অন-ডিমান্ড পরিষেবার জন্য,
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);
ইভেন্টগুলির জন্য শুনুন এবং ত্রুটিগুলি পরিচালনা করুন
একবার আপনি ফ্লিট অনুসরণ করা শুরু করলে, আপনাকে ইভেন্ট পরিবর্তনের জন্য শুনতে হবে এবং নিম্নলিখিত বিভাগগুলিতে বর্ণিত যেকোন ত্রুটিগুলি পরিচালনা করতে হবে।
পরিবর্তন ঘটনা জন্য শুনুন
আপনি অবস্থান প্রদানকারী ব্যবহার করে গাড়ির বস্তু থেকে বহর সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। Changes to the meta information trigger an update event. মেটা তথ্যে যানবাহনের বৈশিষ্ট্য যেমন নেভিগেশন অবস্থা, অবশিষ্ট দূরত্ব এবং কাস্টম বৈশিষ্ট্য অন্তর্ভুক্ত থাকে।
বিস্তারিত জানার জন্য, নিম্নলিখিত দেখুন:
নিম্নলিখিত উদাহরণগুলি দেখায় কিভাবে এই পরিবর্তন ঘটনাগুলি শুনতে হয়।
অন-ডিমান্ড ট্রিপ
জাভাস্ক্রিপ্ট
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);
});
বহর ট্র্যাকিং বন্ধ করুন
ফ্লিট ট্র্যাক করা বন্ধ করতে, আপনি অবস্থান প্রদানকারীর সীমা শূন্যে সেট করুন এবং তারপর নিম্নলিখিত বিভাগে বর্ণিত মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারীকে সরিয়ে দিন।
অবস্থান প্রদানকারীর সীমা নাল সেট করুন
ফ্লিট ট্র্যাক করা থেকে অবস্থান প্রদানকারীকে থামাতে, অবস্থান প্রদানকারীর সীমা শূন্যে সেট করুন।
অন-ডিমান্ড ট্রিপ
জাভাস্ক্রিপ্ট
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);
}
};