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

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

JavaScript Consumer SDK-এর সাহায্যে, আপনি মানচিত্রে যোগ করা দুই ধরনের মার্কারের চেহারা ও অনুভূতি কাস্টমাইজ করতে পারেন:

আপনি এটি দুটি উপায়ের একটিতে করেন:

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

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

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

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

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

এরপর কি