মার্কার কাস্টমাইজ করুন

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

1. প্রকারের উপর ভিত্তি করে মার্কারের স্টাইল : একই প্রকারের মার্কারগুলোকে স্টাইল করতে একটি MarkerOptions অবজেক্ট নির্দিষ্ট করুন। আপনার নির্দিষ্ট করা পরিবর্তনগুলো প্রতিটি মার্কার তৈরি হওয়ার পরে প্রয়োগ করা হয় এবং যেকোনো ডিফল্ট অপশনকে ওভাররাইট করে দেয়। উদাহরণের জন্য, এই গাইডের ' প্রকারের উপর ভিত্তি করে মার্কারের স্টাইল' অংশটি দেখুন।

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

   • ফ্লিট ট্র্যাকিং থেকে প্রাপ্ত ডেটা : ফ্লিট ট্র্যাকিং কাস্টমাইজেশন ফাংশনে ডেটা প্রেরণ করে, যার মধ্যে মার্কারটি কোন ধরনের বস্তুকে প্রতিনিধিত্ব করে তার তথ্যও অন্তর্ভুক্ত থাকে: যানবাহন, স্টপ, বা টাস্ক। এরপর মার্কার এলিমেন্টের বর্তমান অবস্থার উপর ভিত্তি করে মার্কারের স্টাইলিং পরিবর্তিত হয়। উদাহরণস্বরূপ, অবশিষ্ট স্টপের সংখ্যা বা টাস্কের ধরন।

   • বাহ্যিক উৎস : আপনি ফ্লিট ট্র্যাকিং ডেটার সাথে ফ্লিট ইঞ্জিনের বাইরের উৎস থেকে প্রাপ্ত ডেটা একত্রিত করতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কারটির স্টাইলও নির্ধারণ করতে পারেন।

   উদাহরণস্বরূপ, ডেটার উপর ভিত্তি করে স্টাইল মার্কার দেখুন।

3. মার্কারে ক্লিক হ্যান্ডলিং যোগ করুন : উদাহরণের জন্য, ‘ক্লিক হ্যান্ডলিং যোগ করুন ’ দেখুন।

4. কোন মার্কারগুলো দেখা যাবে তা ফিল্টার করুন : জাভাস্ক্রিপ্ট লোকেশন প্রোভাইডারে উপলব্ধ ফিল্টারিং ক্ষমতা ব্যবহার করে কোন মার্কারগুলো প্রদর্শিত হবে তা ফিল্টার করুন। উদাহরণস্বরূপ:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   দ্রষ্টব্য: যদিও আপনি কাস্টমাইজেশন ফাংশন ব্যবহার করে মার্কারের দৃশ্যমানতা ফিল্টার করতে পারেন, তবে এটি পারফরম্যান্সে প্রভাব ফেলতে পারে। যদি আপনাকে এটি করতেই হয়, তবে মার্কারটিতে setVisible(false) কল করুন। উদাহরণের জন্য, "কোন মার্কারগুলো দৃশ্যমান হবে তা ফিল্টার করুন " দেখুন।

5. নির্ধারিত কাজের ডেলিভারি যান ট্র্যাক করতে মার্কার কাস্টমাইজেশন ব্যবহার করুন : আপনি যানবাহন ট্র্যাক করার জন্য মার্কার কাস্টমাইজ করতে পারেন। আরও তথ্যের জন্য, ‘ডেলিভারি যান ট্র্যাক করতে মার্কার কাস্টমাইজেশন ব্যবহার করুন’ দেখুন।

মার্কার কাস্টমাইজেশন বিকল্পগুলি

ফ্লিট ট্র্যাকিং লাইব্রেরি নিম্নলিখিত কাস্টমাইজেশন প্যারামিটারগুলো প্রদান করে:

অন-ডিমান্ড ট্রিপ কাস্টমাইজেশন প্যারামিটার

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

নির্ধারিত কাজ কাস্টমাইজেশন প্যারামিটার

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

প্রকারের উপর ভিত্তি করে স্টাইল মার্কার

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি MarkerOptions অবজেক্ট ব্যবহার করে একটি যানবাহন মার্কারের স্টাইলিং কনফিগার করতে হয়। Marker customization options- এ তালিকাভুক্ত যেকোনো বিকল্প ব্যবহার করে যেকোনো মার্কারের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।

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

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization = {
  cursor: 'grab'
};

নির্ধারিত কাজের উদাহরণ

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

টাইপস্ক্রিপ্ট

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

ডেটার উপর ভিত্তি করে স্টাইল মার্কার

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

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

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

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

নির্ধারিত কাজের উদাহরণ

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

টাইপস্ক্রিপ্ট

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন

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

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

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

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

নির্ধারিত কাজের উদাহরণ

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

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

টাইপস্ক্রিপ্ট

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

কোন মার্কারগুলো দৃশ্যমান হবে তা ফিল্টার করুন

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

যদি আপনার setVisible ব্যবহার করার প্রয়োজন হয়, তাহলে উপরে মার্কার কাস্টমাইজেশন অপশন- এ তালিকাভুক্ত যেকোনো বিকল্প ব্যবহার করে মার্কার ফিল্টার করতে এই প্যাটার্নটি অনুসরণ করুন।

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

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

নির্ধারিত কাজের উদাহরণ

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

টাইপস্ক্রিপ্ট

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

এরপর কী?

• একটি মানচিত্র শৈলী
• পলিলাইন কাস্টমাইজ করুন