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

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

মানচিত্রে যোগ করা মার্কারগুলির চেহারা এবং অনুভূতি কাস্টমাইজ করুন৷ দুটি উপায়ে মানচিত্রে যোগ করা মার্কারগুলির চেহারা এবং অনুভূতি কাস্টমাইজ করুন:

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

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

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

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

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

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

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

উভয় বিকল্পই FleetEngineTripLocationProviderOptions এর অধীনে Google Maps JavaScript API-এ নিম্নলিখিত কাস্টমাইজেশন প্যারামিটার ব্যবহার করে:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

MarkerOptions ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন

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

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

টাইপস্ক্রিপ্ট

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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

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

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

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

টাইপস্ক্রিপ্ট

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

এরপর কি

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