এই ডকুমেন্ট থেকে আপনি জানতে পারবেন যে গ্রাহকদের জন্য আপনার ওয়েব-ভিত্তিক জার্নি ট্র্যাকিং অ্যাপে ব্যবহার করা ম্যাপের জন্য কীভাবে রুট পলিলাইন কাস্টমাইজ করতে হয়।
Consumer SDK-এর মাধ্যমে, আপনি ম্যাপে কোনও যাত্রার রুটের জন্য রুট পলিলাইনের দৃশ্যমানতা নিয়ন্ত্রণ করতে বা রুট পলিলাইন স্টাইল করতে পারেন। SDK, যাত্রার
অ্যাক্টিভ বা বাকি থাকা পাথের প্রতিটি কোঅর্ডিনেট পেয়ারের জন্য একটি
google.maps.Polyline অবজেক্ট তৈরি করে। লাইব্রেরি তখন এই কাস্টমাইজেশনগুলি দুটি পরিস্থিতিতে
প্রয়োগ করে:
- ম্যাপে অবজেক্ট যোগ করার আগে
- অবজেক্টের জন্য ব্যবহার করা ডেটা পরিবর্তন করা হলে
রুটের পলিলাইন স্টাইল করুন
আপনি যেভাবে মার্কার স্টাইল করতে পারেন, ঠিক একইভাবে কাস্টমাইজেশন প্যারামিটার ব্যবহার করে রুট পলিলাইন স্টাইল করতে পারেন। সেখান থেকে, আপনি নিম্নলিখিত পদ্ধতিগুলির মধ্যে একটি ব্যবহার করে স্টাইলিং কনফিগার করেন:
- সবচেয়ে সহজ: মিলে যাওয়া সব
Polylineঅবজেক্ট তৈরি বা আপডেট করার সময়PolylineOptionsব্যবহার করুন। - উন্নত: একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করুন।
কাস্টমাইজেশন ফাংশনগুলি ফ্লিট ইঞ্জিন দ্বারা প্রেরিত ডেটার উপর ভিত্তি করে অবজেক্টের স্বতন্ত্র স্টাইলিংয়ের অনুমতি দেয়। ফাংশনটি যাত্রার বর্তমান অবস্থার উপর ভিত্তি করে প্রতিটি অবজেক্টের স্টাইলিং পরিবর্তন করতে পারে; যেমন,
Polylineঅবজেক্টটিকে আরও গাঢ় শেডে রঙ করা, বা গাড়িটি ধীর গতিতে চলার সময় এটিকে আরও মোটা করা। এমনকি আপনি Fleet Engine-এর বাইরের সোর্স থেকে আবার যোগ দিতে পারেন এবং সেই তথ্যের ভিত্তিতেPolylineঅবজেক্ট স্টাইল করতে পারেন।
কাস্টমাইজেশন প্যারামিটার
রুটের পলিলাইন স্টাইল করার সময়, আপনি
FleetEngineTripLocationProviderOptions-এ দেওয়া প্যারামিটার ব্যবহার করেন। এইসব প্যারামিটার গাড়ির যাত্রাপথের বিভিন্ন অবস্থার জন্য
প্রদান করা হয়, যেমন:
- আগে থেকেই ভ্রমণ করা পথ:
takenPolylineCustomizationব্যবহার করুন। - অ্যাক্টিভভাবে ভ্রমণ করা পথ:
activePolylineCustomizationব্যবহার করুন। - এখনও ভ্রমণ করা হয়নি এমন পথ:
remainingPolylineCustomizationব্যবহার করুন।
PolylineOptions ব্যবহার করুন
PolylineOptions-এর মাধ্যমে Polyline অবজেক্টের জন্য কীভাবে স্টাইলিং কনফিগার করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে। আগে তালিকাভুক্ত করা যেকোনও পলিলাইন কাস্টমাইজেশন ব্যবহার করে
যেকোনও Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্ন অনুসরণ করুন।
জাভাস্ক্রিপ্ট
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
রুটের পলিলাইন স্টাইল করতে কাস্টমাইজেশন ফাংশন ব্যবহার করুন
নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে কীভাবে একটি অ্যাক্টিভ রুট পলিলাইনের জন্য স্টাইলিং কনফিগার করতে হয়। আগে তালিকাভুক্ত রুট পলিলাইন কাস্টমাইজেশন প্যারামিটারের যেকোনও একটি ব্যবহার করে
যেকোনও Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্ন ফলো করুন।
জাভাস্ক্রিপ্ট
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
রুটের পলিলাইন দৃশ্যমানতা নিয়ন্ত্রণ করুন
ডিফল্ট হিসেবে, সব Polyline অবজেক্ট দেখা যায়। Polyline অবজেক্ট অদৃশ্য করতে, সেটির visible প্রপার্টি সেট করুন:
জাভাস্ক্রিপ্ট
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};