একটি বহর দেখুন

এই বিভাগে দেখানো হয়েছে কিভাবে জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করে একটি ফ্লিট দেখতে হয়। এই পদ্ধতিগুলি ধরে নেয় যে আপনি ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ করেছেন এবং একটি মানচিত্র লোড করেছেন। বিস্তারিত জানার জন্য, জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি সেট আপ করুন দেখুন।

এই নথিতে একটি বহর দেখার সময় আপনি নিম্নলিখিত জিনিসগুলি নিয়ে আলোচনা করতে পারেন:

  1. বহর ট্র্যাকিং শুরু করুন
  2. ঘটনাগুলি শুনুন এবং ত্রুটিগুলি সমাধান করুন
  3. ট্র্যাকিং বন্ধ করো
  4. একটি বহর দেখার সময় একটি একক যানবাহন ট্র্যাক করুন

বহর ট্র্যাক করা শুরু করুন

একটি ফ্লিট ট্র্যাক করার জন্য, আপনাকে একটি ফ্লিট লোকেশন প্রোভাইডার চালু করতে হবে এবং নিম্নলিখিত বিভাগগুলিতে বর্ণিত ম্যাপ ভিউপোর্টের জন্য অবস্থানের সীমাবদ্ধতা সেট করতে হবে।

একটি ফ্লিট লোকেশন প্রদানকারী চালু করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরিতে একটি লোকেশন প্রোভাইডার রয়েছে যা ফ্লিট ইঞ্জিন থেকে একাধিক যানবাহন নিয়ে আসে।

এটি চালু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার প্রোজেক্ট আইডির পাশাপাশি আপনার টোকেন ফেচারের রেফারেন্স ব্যবহার করুন

  2. যানবাহন ফিল্টার কোয়েরি ব্যবহার করুন যানবাহন ফিল্টার কোয়েরি মানচিত্রে কোন যানবাহন প্রদর্শিত হবে তা নিয়ন্ত্রণ করে। ফিল্টারটি ফ্লিট ইঞ্জিনে প্রেরণ করা হয়।

    • অন-ডিমান্ড পরিষেবার জন্য, vehicleFilter ব্যবহার করুন এবং ListVehiclesRequest.filter পর্যালোচনা করুন।
    • নির্ধারিত কাজের জন্য, deliveryVehicleFilter ব্যবহার করুন এবং ListDeliveryVehiclesRequest.filter পর্যালোচনা করুন।
  3. যানবাহন প্রদর্শনের জন্য সীমানা নির্ধারণ করুন । মানচিত্রে যানবাহন প্রদর্শনের জন্য এলাকা সীমিত করতে locationRestriction ব্যবহার করুন। এটি সেট না করা পর্যন্ত অবস্থান প্রদানকারী সক্রিয় থাকে না। আপনি কনস্ট্রাক্টরে অথবা কনস্ট্রাক্টরের পরে অবস্থান সীমা নির্ধারণ করতে পারেন।

  4. মানচিত্র দৃশ্য শুরু করুন

নিম্নলিখিত উদাহরণগুলি দেখায় যে কীভাবে অন-ডিমান্ড এবং শিডিউল করা উভয় কাজের পরিস্থিতিতে একটি ফ্লিট লোকেশন প্রোভাইডারকে ইনস্ট্যান্ট করা যায়। এই উদাহরণগুলি লোকেশন প্রোভাইডারকে সক্রিয় করার জন্য কনস্ট্রাক্টরে 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);
});

বহরের ট্র্যাকিং বন্ধ করুন

ফ্লিট ট্র্যাকিং বন্ধ করতে, আপনি লোকেশন প্রোভাইডার-এর সীমানা নাল হিসেবে সেট করুন, এবং তারপর নিম্নলিখিত বিভাগগুলিতে বর্ণিত ম্যাপ ভিউ থেকে লোকেশন প্রোভাইডারটি সরিয়ে ফেলুন।

অবস্থান প্রদানকারীর সীমানা শূন্যে সেট করুন

লোকেশন প্রোভাইডার যাতে ফ্লিট ট্র্যাক না করে, তার জন্য লোকেশন প্রোভাইডার সীমানা নাল হিসেবে সেট করুন।

চাহিদা অনুযায়ী ভ্রমণ

জাভাস্ক্রিপ্ট

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
});

ডেলিভারি গাড়ি ট্র্যাক করতে মার্কার কাস্টমাইজেশন ব্যবহার করুন

ডেলিভারি গাড়ির লোকেশন প্রদানকারী যাতে আপনি যখন ডেলিভারি গাড়ির ফ্লিট মার্কারে ক্লিক করেন তখন সেটি ট্র্যাক করতে পারে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. একটি মার্কার কাস্টমাইজ করুন এবং একটি ক্লিক অ্যাকশন যোগ করুন।

  2. ডুপ্লিকেট মার্কার প্রতিরোধ করতে মার্কারটি লুকান।

এই ধাপগুলির উদাহরণ নিম্নলিখিত বিভাগগুলিতে রয়েছে।

একটি মার্কার কাস্টমাইজ করুন এবং একটি ক্লিক অ্যাকশন যোগ করুন

জাভাস্ক্রিপ্ট

// 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);
    }
  };

এরপর কি?