একটি যানবাহন ট্র্যাক করুন

এই বিভাগটি দেখায় যে কীভাবে জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করে অন-ডিমান্ড ট্রিপ বা নির্ধারিত কাজের জন্য যানবাহন ট্র্যাক করতে হয়।

একটি যানবাহন ট্র্যাক করতে, আপনি এই পদক্ষেপগুলি করুন:

  1. লাইব্রেরি লোড করুন এবং মানচিত্র দৃশ্য শুরু করুন
  2. গাড়ির অবস্থান এবং মানচিত্র দৃশ্য প্রদান করুন
  3. ইভেন্টগুলির জন্য শুনুন এবং ত্রুটিগুলি পরিচালনা করুন
  4. ট্র্যাকিং বন্ধ করুন

লাইব্রেরি লোড করুন এবং মানচিত্র দৃশ্য শুরু করুন

আপনার ওয়েব পৃষ্ঠায় একটি মানচিত্রে আপনার ফ্লিট অপারেশনগুলি প্রদর্শন করতে, একটি স্ক্রিপ্ট ব্যবহার করুন যা আপনার API কী ব্যবহার করে একটি মানচিত্রকে কল করে৷ নিম্নলিখিত উদাহরণ দেখায় কিভাবে HTML থেকে এটি করতে হয়:

  • URL উত্স : আপনার API কী ব্যবহার করে একটি মানচিত্রের অনুরোধ করতে google maps API-কে কল করে৷

  • callback প্যারামিটার : API কল রিটার্ন করার পরে initMap ফাংশন চালায়।

  • libraries প্যারামিটার : ফ্লিট ট্র্যাকিং লাইব্রেরি লোড করে।

  • defer attribute : API লোড হওয়ার সময় ব্রাউজারকে আপনার পৃষ্ঠার বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

গাড়ির অবস্থান এবং মানচিত্র দৃশ্য প্রদান করুন

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

একটি গাড়ির অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন

JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরিতে Fleet Engine API-এর জন্য একটি অবস্থান প্রদানকারী অন্তর্ভুক্ত রয়েছে। নিম্নলিখিত উদাহরণগুলিতে দেখানো হিসাবে এটিকে ইনস্ট্যান্ট করতে আপনার প্রকল্প আইডি এবং আপনার টোকেন ফেচারের একটি রেফারেন্স ব্যবহার করুন৷

অন-ডিমান্ড ট্রিপ

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

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

এরপর কি