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

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

ম্যাপে যোগ করা মার্কারের লুক ও ফিল কাস্টমাইজ করুন। ম্যাপে যোগ করা মার্কারের লুক ও ফিল দুটি উপায়ে কাস্টমাইজ করুন:

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

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

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

    • বাইরের সোর্স: আপনি Fleet Engine-এর বাইরের সোর্স থেকে পাওয়া ডেটার সাথে ট্রিপ শেয়ারিং ডেটা একত্রিত করতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কার স্টাইল করতে পারেন।

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

  3. মার্কারে ক্লিক হ্যান্ডলিং যোগ করা: উদাহরণস্বরূপ, ক্লিক হ্যান্ডলিং যোগ করা দেখুন।

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

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

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

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

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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

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

TypeScript

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.
      });
    }
  };

TypeScript

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

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