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

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

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

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

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

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

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

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

4. কোন মার্কারগুলি দৃশ্যমান তা ফিল্টার করুন : JavaScript অবস্থান প্রদানকারীতে উপলব্ধ ফিল্টারিং ক্ষমতা সহ কোন মার্কারগুলি প্রদর্শিত হবে তা ফিল্টার করুন৷ যেমন:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

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

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

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

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

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

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

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

ধরনের উপর ভিত্তি করে শৈলী মার্কার

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

অন-ডিমান্ড ট্রিপের উদাহরণ

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 ব্যবহার করার প্রয়োজন হয়, উপরের মার্কার কাস্টমাইজেশন বিকল্পগুলিতে তালিকাভুক্ত যেকোনো বিকল্প ব্যবহার করে যেকোনো মার্কার ফিল্টার করতে এই প্যাটার্নটি অনুসরণ করুন।

অন-ডিমান্ড ট্রিপের উদাহরণ

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

এরপর কি

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