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