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