গ্রাহকদের জন্য আপনার ওয়েব-ভিত্তিক শিপমেন্ট ট্র্যাকিং অ্যাপে যে ম্যাপ ব্যবহার করেন, সেটিতে কীভাবে গাড়ি ও লোকেশন মার্কার কাস্টমাইজ করবেন তা এই ডকুমেন্টে কভার করা হয়েছে।
JavaScript Consumer SDK-এর সাহায্যে, আপনি ম্যাপে যোগ করা দুই ধরনের মার্কারের লুক অ্যান্ড ফিল কাস্টমাইজ করতে পারেন:
- ডেলিভারি ভেহিকল মার্কার:
deliveryVehicleMarkerCustomizationব্যবহার করুন - গন্তব্য মার্কার:
destinationMarkerCustomizationব্যবহার করুন
আপনি দুটি উপায়ের যেকোনও একটিতে এটি করতে পারেন:
- সবচেয়ে সহজ: একই ধরনের সব মার্কারের ক্ষেত্রে প্রয়োগ করার জন্য
একটি
MarkerOptionsঅবজেক্ট নির্দিষ্ট করুন। Consumer SDK দুটি পরিস্থিতিতে স্টাইলিং প্রয়োগ করে: ম্যাপে মার্কার যোগ করার আগে এবং মার্কারের জন্য ব্যবহৃত ডেটা পরিবর্তন করা হলে। - আরও উন্নত: কাস্টমাইজেশন ফাংশন নির্দিষ্ট করুন। কাস্টমাইজেশন ফাংশন ডেটার উপর ভিত্তি করে মার্কার স্টাইলিং করার পাশাপাশি মার্কারগুলিতে ইন্টারঅ্যাক্টিভিটি যোগ করার অনুমতি দেয়, যেমন ক্লিক হ্যান্ডলিং। বিশেষ করে, Consumer SDK কাস্টমাইজেশন ফাংশনে অবজেক্টের ধরন সম্পর্কে ডেটা পাস করে, যা মার্কার দেখায়: গাড়ি বা গন্তব্য। এটি মার্কার এলিমেন্টের বর্তমান অবস্থার উপর ভিত্তি করে মার্কার স্টাইলিং পরিবর্তন করার অনুমতি দেয়; উদাহরণস্বরূপ, গন্তব্যে পৌঁছানোর জন্য বাকি থাকা পরিকল্পিত স্টপের সংখ্যা। এমনকি আপনি Fleet Engine-এর বাইরের সোর্স থেকে পাওয়া ডেটার সাথেও যোগ দিতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কার স্টাইল করতে পারেন।
সহজ উদাহরণ: MarkerOptions ব্যবহার করুন
MarkerOptions অবজেক্টের মাধ্যমে কীভাবে কোনও গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে। এই উদাহরণ মার্কারের অস্বচ্ছতা ৫০% সেট করে।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
উন্নত উদাহরণ: কাস্টমাইজেশন ফাংশন ব্যবহার করুন
শিডিউল করা টাস্কের জন্য স্টপে পৌঁছানোর আগে, গাড়ির জন্য বাকি স্টপ কাউন্ট দেখানোর জন্য, কীভাবে গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
মার্কারে ক্লিক হ্যান্ডলিং যোগ করুন
আপনি যেকোনও মার্কারের জন্য ক্লিক হ্যান্ডলিং যোগ করতে পারেন, যেমন নিম্নলিখিত উদাহরণে গাড়ির মার্কারের জন্য দেখানো হয়েছে।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
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();
TypeScript
// 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();