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

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

জাভাস্ক্রিপ্ট কনজিউমার এসডিকে ব্যবহার করে, আপনি ম্যাপে যুক্ত দুই ধরনের মার্কারের চেহারা ও অনুভূতি নিজের পছন্দমতো সাজিয়ে নিতে পারেন:

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

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

সহজ উদাহরণ: 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();

এরপর কী?