با کتابخانه ردیابی ناوگان جاوا اسکریپت، می توانید ظاهر و احساس نشانگرهای اضافه شده به نقشه را سفارشی کنید. این کار را با تعیین سفارشی‌سازی نشانگر انجام می‌دهید، که کتابخانه ردیابی ناوگان سپس قبل از افزودن نشانگرها به نقشه و با هر به‌روزرسانی نشانگر اعمال می‌کند. می توانید ظاهر و احساس نشانگرها را به این روش ها سفارشی کنید:
نشانگرهای سبک بر اساس نوع : یک شی
MarkerOptionsرا برای نشانگرهای سبک از همان نوع مشخص کنید. سپس تغییراتی که مشخص می‌کنید پس از ایجاد هر نشانگر اعمال می‌شوند و گزینه‌های پیش‌فرض را بازنویسی می‌کنند. برای مثال، نشانگرهای سبک بر اساس نوع را در این راهنما ببینید.نشانگرهای سبک بر اساس داده ها : یک تابع سفارشی سازی بر اساس داده ها و همچنین افزودن تعامل به نشانگرها، مانند مدیریت کلیک، مشخص کنید. می‌توانید بر اساس داده‌های ردیابی ناوگان یا از منابع خارجی استایل کنید:
داده‌های ردیابی ناوگان : ردیابی ناوگان داده‌ها را به تابع سفارشی‌سازی از جمله نوع شیئی که نشانگر نشان می‌دهد: وسیله نقلیه، توقف، یا وظیفه ارسال می‌کند. سپس استایل نشانگر بر اساس وضعیت فعلی عنصر نشانگر تغییر می کند. به عنوان مثال، تعداد توقف های باقی مانده یا نوع کار.
منابع خارجی : می‌توانید داده‌های ردیابی ناوگان را با داده‌های منابع خارج از Fleet Engine ترکیب کنید و نشانگر را نیز بر اساس آن اطلاعات استایل دهید.
برای مثال، نشانگرهای سبک را بر اساس داده ها ببینید.
افزودن کنترل کلیک به نشانگرها : برای مثال، به افزودن مدیریت کلیک مراجعه کنید.
فیلتر کردن نشانگرهای قابل مشاهده : فیلتر کردن نشانگرهایی که با قابلیت‌های فیلتر موجود در ارائه‌دهنده مکان جاوا اسکریپت ظاهر می‌شوند. مثلا:
استفاده از سفارشی سازی نشانگر برای ردیابی وسیله نقلیه تحویل وظایف برنامه ریزی شده : می توانید نشانگرها را برای ردیابی وسایل نقلیه سفارشی کنید. برای اطلاعات بیشتر، استفاده از سفارشی سازی نشانگر برای ردیابی وسیله نقلیه تحویل را ببینید.
گزینه های سفارشی سازی نشانگر
کتابخانه ردیابی ناوگان پارامترهای سفارشی سازی زیر را ارائه می دهد:
پارامترهای سفارشی سازی سفرهای درخواستی
پارامترهای سفارشی سازی وظایف برنامه ریزی شده
نشانگرهای سبک بر اساس نوع
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با شیء MarkerOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از گزینه های فهرست شده در گزینه های سفارشی سازی نشانگر، استایل هر نشانگر را سفارشی کنید.
نمونه سفرهای درخواستی
جاوا اسکریپت
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
نشانگرهای سبک بر اساس داده ها
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با استفاده از توابع سفارشی‌سازی نشان می‌دهد. این الگو را دنبال کنید تا با استفاده از هر یک از گزینه‌های فهرست شده در گزینه‌های سفارشی‌سازی نشانگر فهرست‌شده در بالا، استایل هر نشانگر را بر اساس داده‌ها سفارشی کنید.
نمونه سفرهای درخواستی
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
کنترل کلیک را به نشانگرها اضافه کنید
مثال زیر نشان می دهد که چگونه می توان کنترل کلیک را به نشانگر خودرو اضافه کرد. این الگو را دنبال کنید تا با استفاده از هر یک از گزینه‌های فهرست شده در گزینه‌های سفارشی‌سازی نشانگر فهرست‌شده در بالا، مدیریت کلیک را به هر نشانگری اضافه کنید.
نمونه سفرهای درخواستی
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
نشانگرهای قابل مشاهده را فیلتر کنید
اگر می‌خواهید از setVisible استفاده کنید، از این الگو پیروی کنید تا هر نشانگر را با استفاده از هر یک از گزینه‌های فهرست شده در گزینه‌های سفارشی‌سازی نشانگر در بالا فیلتر کنید.
نمونه سفرهای درخواستی
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};