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

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

জাভাস্ক্রিপ্ট কনজিউমার SDK এর সাহায্যে, আপনি মানচিত্রে যোগ করা দুই ধরণের মার্কারের চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন:

• ডেলিভারি গাড়ির মার্কার : deliveryVehicleMarkerCustomization মার্কার কাস্টমাইজেশন
• গন্তব্য চিহ্নিতকারী : destinationMarkerCustomization ব্যবহার করুন

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

• সবচেয়ে সহজ : একই ধরণের সকল মার্কারে প্রয়োগ করার জন্য একটি MarkerOptions অবজেক্ট নির্দিষ্ট করুন। এরপর Consumer 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();

এরপর কি?

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