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

গ্রাহকদের জন্য আপনার ওয়েব-ভিত্তিক শিপমেন্ট ট্র্যাকিং অ্যাপে ব্যবহার করা ম্যাপে কীভাবে গাড়ি ও লোকেশন মার্কার কাস্টমাইজ করতে হয় তা এই ডকুমেন্টে বলা আছে।

JavaScript Consumer SDK-এর সাহায্যে, আপনি ম্যাপে যোগ করা দুই ধরনের মার্কারের লুক অ্যান্ড ফিল কাস্টমাইজ করতে পারবেন:

• ডেলিভারি ভেইকেল মার্কার: deliveryVehicleMarkerCustomization ব্যবহার করুন
• গন্তব্য মার্কার: destinationMarkerCustomization ব্যবহার করুন

আপনি দুটি উপায়ের যেকোনও একটির মাধ্যমে এটি করতে পারবেন:

• সবচেয়ে সহজ: একই ধরনের সব মার্কারের ক্ষেত্রে প্রয়োগ করার জন্য একটি MarkerOptions অবজেক্ট নির্দিষ্ট করুন। Consumer SDK তারপরে দুটি পরিস্থিতিতে স্টাইলিং প্রয়োগ করে: ম্যাপে মার্কার যোগ করার আগে এবং মার্কারের জন্য ব্যবহৃত ডেটা পরিবর্তন করা হলে।
• আরও উন্নত: কাস্টমাইজেশন ফাংশন নির্দিষ্ট করুন। কাস্টমাইজেশন ফাংশন ডেটার উপর ভিত্তি করে মার্কারের স্টাইলিং করার অনুমতি দেয়, সেইসাথে মার্কারের সাথে ইন্টার‍্যাক্টিভিটি যোগ করে, যেমন ক্লিক হ্যান্ডেল করা। বিশেষত, Consumer SDK কাস্টমাইজেশন ফাংশনে সেই অবজেক্টের ধরন সম্পর্কে ডেটা পাস করে যা মার্কারটি উপস্থাপন করে: গাড়ি বা গন্তব্য। এর ফলে, মার্কার এলিমেন্টের বর্তমান অবস্থার উপর ভিত্তি করে মার্কার স্টাইলিং পরিবর্তন করা যায়; যেমন, গন্তব্যে পৌঁছানো পর্যন্ত বাকি থাকা প্ল্যান করা স্টপের সংখ্যা। এমনকি আপনি Fleet Engine-এর বাইরের সোর্স থেকে পাওয়া ডেটার সাথেও যোগ করতে পারেন এবং সেই তথ্যের ভিত্তিতে মার্কারের স্টাইল পরিবর্তন করতে পারেন।

সহজ উদাহরণ: MarkerOptions ব্যবহার করুন

নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে MarkerOptions অবজেক্টের মাধ্যমে কোনও গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয়। এই উদাহরণে মার্কারের অস্বচ্ছতা ৫০% হিসেবে সেট করা হয়েছে।

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

উন্নত উদাহরণ: কাস্টমাইজেশন ফাংশন ব্যবহার করুন

নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে কোনও শিডিউল করা টাস্কের জন্য স্টপে পৌঁছানোর আগে গাড়ির জন্য বাকি স্টপের সংখ্যা দেখানোর জন্য গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয়।

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

আপনি যেকোনও মার্কারের জন্য ক্লিক হ্যান্ডলিং যোগ করতে পারেন, যেমন নিম্নলিখিত উদাহরণে গাড়ির মার্কারের জন্য দেখানো হয়েছে।

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

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

মার্কারের জন্য অতিরিক্ত তথ্য দেখান

আপনি কোনও গাড়ি বা লোকেশন মার্কার সম্পর্কে অতিরিক্ত তথ্য দেখাতে InfoWindow ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণটি একটি InfoWindow তৈরি করে এবং এটি একটি গাড়ির মার্কারের সাথে অ্যাটাচ করে:

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

এর পরে কী করতে হবে

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