এই বিভাগে দেখানো হয়েছে যে কীভাবে JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করে ফ্লিট দেখতে হয়। এই পদ্ধতিগুলি ধরে নেয় যে আপনি ফ্লিট ট্র্যাকিং লাইব্রেরি সেট-আপ করেছেন এবং একটি ম্যাপ লোড করেছেন। বিস্তারিত জানতে, জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি সেট-আপ করুন দেখুন।
এই ডকুমেন্টে নিম্নলিখিত বিষয়গুলি আলোচনা করা হয়েছে যা আপনি কোনও ফ্লিট দেখার সময় করতে পারেন:
- ফ্লিট ট্র্যাক করা শুরু করুন।
- ইভেন্ট শুনুন এবং সমস্যা সমাধান করুন।
- ট্র্যাক করা বন্ধ করুন।
- ফ্লিট দেখার সময় একটি গাড়ি ট্র্যাক করুন।
ফ্লিট ট্র্যাক করা শুরু করুন
ফ্লিট ট্র্যাক করতে, আপনাকে একটি ফ্লিট লোকেশন প্রোভাইডার ইনস্ট্যান্টিয়েট করতে হবে এবং নিম্নলিখিত বিভাগে বর্ণিত ম্যাপ ভিউপোর্টের জন্য লোকেশন সংক্রান্ত বিধিনিষেধ সেট করতে হবে।
ফ্লিট লোকেশন প্রোভাইডার ইনস্ট্যান্টিয়েট করা
JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরিতে একটি লোকেশন প্রোভাইডার অন্তর্ভুক্ত থাকে যা ফ্লিট ইঞ্জিন থেকে একাধিক গাড়ি নিয়ে আসে।
এটি ইনস্ট্যান্টিয়েট করতে, এই ধাপগুলি অনুসরণ করুন:
আপনার টোকেন ফেচারের রেফারেন্সের পাশাপাশি আপনার প্রোজেক্ট আইডি ব্যবহার করুন।
গাড়ির ফিল্টার কোয়েরি ব্যবহার করুন গাড়ির ফিল্টার কোয়েরি ম্যাপে কোন গাড়ি দেখানো হবে তা নিয়ন্ত্রণ করে। ফিল্টারটি Fleet Engine-এ পাস করা হয়।
- চাহিদা অনুসারে পরিষেবার জন্য,
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"',
});
TypeScript
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"',
});
TypeScript
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;
}
});
TypeScript
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;
}
});
TypeScript
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);
TypeScript
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);
TypeScript
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);
}
});
TypeScript
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);
}
}
});
TypeScript
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);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
ফ্লিট ট্র্যাক করা বন্ধ করুন
ফ্লিট ট্র্যাক করা বন্ধ করতে, আপনি লোকেশন প্রোভাইডারের বাউন্ড নাল হিসেবে সেট করেন, এবং তারপর নিম্নলিখিত বিভাগে বর্ণনা করা অনুযায়ী ম্যাপ ভিউ থেকে লোকেশন প্রোভাইডার সরিয়ে দেন।
লোকেশন প্রদানকারীর বাউন্ড নাল হিসেবে সেট করুন
লোকেশন প্রদানকারীকে ফ্লিট ট্র্যাক করা থেকে থামাতে, লোকেশন প্রদানকারীর বাউন্ড নাল হিসেবে সেট করুন।
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
ম্যাপ ভিউ থেকে লোকেশন প্রদানকারীকে সরান
ম্যাপ ভিউ থেকে কীভাবে লোকেশন প্রোভাইডার সরাতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
TypeScript
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
});
TypeScript
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();
});
}
};
TypeScript
// 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);
}
};
TypeScript
// 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);
}
};