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

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

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

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

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

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

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

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

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

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

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

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

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

একটি গাড়ির অবস্থান প্রদানকারী চালু করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরিতে ফ্লিট ইঞ্জিন 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);

এরপর কি?