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

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

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

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

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

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

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

3. মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন : উদাহরণস্বরূপ, ক্লিক হ্যান্ডলিং যোগ করুন দেখুন।

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

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

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

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

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

চাহিদা অনুযায়ী ভ্রমণের কাস্টমাইজেশন প্যারামিটার

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

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

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

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

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

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

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>9;, () = {
        // Perform chosen action.
      });
    }
  };

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

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

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

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

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

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

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

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

এরপর কি?

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