يتناول هذا المستند كيفية تخصيص علامات المركبات والمواقع الجغرافية في الخريطة التي تستخدمها لتطبيق تتبُّع الشحنات المستند إلى الويب والمخصّص للمستهلكين.
باستخدام حزمة تطوير البرامج (SDK) لتطبيقات المستهلك المستندة إلى JavaScript، يمكنك تخصيص شكل وأسلوب نوعين من العلامات المُضافة إلى الخريطة:
- علامات مركبات التسليم: استخدِم
deliveryVehicleMarkerCustomization
. - علامات الوجهة: استخدِم
destinationMarkerCustomization
.
يمكنك إجراء ذلك بطريقتَين:
- الأبسط: حدِّد كائن
MarkerOptions
لتطبيقه على كل العلامات من النوع نفسه. بعد ذلك، تطبِّق حزمة Consumer SDK التصميم في حالتين: قبل إضافة العلامات إلى الخريطة، وعند تغيُّر البيانات المستخدَمة في العلامات. - الإعدادات الأكثر تقدمًا: حدِّد وظيفة تخصيص. تسمح وظائف التخصيص بتحديد نمط العلامات استنادًا إلى البيانات، فضلاً عن إضافة التفاعل إلى العلامات، مثل معالجة النقر. على وجه التحديد، تُرسِل حزمة Consumer SDK البيانات إلى وظيفة التخصيص عن نوع العنصر الذي يمثّله العلامة: المركبة أو الوجهة. يتيح ذلك بعد ذلك تغيير تنسيق العلامة استنادًا إلى الحالة الحالية لعنصر العلامة نفسه، مثلاً عدد المحطات المخطّط لها المتبقية حتى الوصول إلى الوجهة. يمكنك حتى الانضمام إلى البيانات من مصادر خارج Fleet Engine وتصميم العلامة بناءً على تلك المعلومات.
مثال بسيط: استخدام MarkerOptions
يوضّح المثال التالي كيفية ضبط تصميم علامة المركبة باستخدام عنصر MarkerOptions
. يضبط هذا المثال شفافية العلامة على %50.
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();