این سند نحوه سفارشیسازی نشانگرهای مکان و خودرو را در نقشهای که برای برنامه ردیابی محموله مبتنی بر وب برای مصرفکنندگان استفاده میکنید پوشش میدهد.
با «کیت توسعه نرمافزار مصرفکننده جاوا اسکریپت»، میتوانید ظاهر و احساس دو نوع نشانه اضافه شده به نقشه را سفارشیسازی کنید:
- نشانگرهای وسیله تحویل: از
deliveryVehicleMarkerCustomizationاستفاده کنید - نشانگرهای مقصد: از
destinationMarkerCustomizationاستفاده کنید
این کار را به یکی از دو روش زیر انجام میدهید:
- سادهترین: یک شیء
MarkerOptionsرا مشخص کنید تا روی همه نشانگرهای از همان نوع اعمال شود. سپس Consumer SDK سبک را در دو موقعیت اعمال میکند: قبلاز افزودن نشانگرها به نقشه، و زمانی که دادههای استفادهشده برای نشانگرها تغییر کرده باشد. - پیشرفتهتر: تابع سفارشیسازی را مشخص کنید. عملکردهای سفارشیسازی امکان سبکدهی به نشانگرها براساس دادهها و همچنین افزودن تعامل به نشانگرها، مانند مدیریت کلیک را فراهم میکنند. بهطور خاص، Consumer SDK دادههایی را درباره نوع شیء نشانگر (خودرو یا مقصد) به تابع سفارشیسازی ارسال میکند. این کار به سبکبندی نشانگر اجازه میدهد تا براساس وضعیت فعلی عنصر نشانگر تغییر کند؛ برای مثال، تعداد توقفهای برنامهریزیشده باقیمانده تا مقصد. حتی میتوانید دادههای منابع خارج از Fleet Engine را ادغام کنید و براساس آن اطلاعات، نشانگر را سبکبندی کنید.
مثال ساده: استفاده از MarkerOptions
مثال زیر نحوه پیکربندی سبکسازی نشانگر خودرو را با
MarkerOptions شیء نشان میدهد. این مثال ماتی نشانه را روی ۵۰٪ تنظیم میکند.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
مثال پیشرفته: استفاده از تابع سفارشیسازی
مثال زیر نحوه پیکربندی سبکبندی نشانگر خودرو را برای نمایش تعداد توقفهای باقیمانده خودرو قبلاز رسیدن به توقف تکلیف زمانبندیشده نشان میدهد.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
افزودن مدیریت کلیک به نشانگرها
میتوانید مدیریت کلیک را به هر نشانگری اضافه کنید، مانند مثال زیر برای نشانگر خودرو.
JavaScript
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 ایجاد میکند و آن را به یک نشانگر خودرو پیوست میکند:
JavaScript
// 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();