نشانگرها را سفارشی کنید
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
این سند نحوه سفارشی کردن نشانگرهای وسیله نقلیه و مکان را در نقشه ای که برای برنامه ردیابی محموله مبتنی بر وب خود برای مصرف کنندگان استفاده می کنید، پوشش می دهد.
با JavaScript Consumer SDK، می توانید ظاهر و احساس دو نوع نشانگر اضافه شده به نقشه را سفارشی کنید:
شما این کار را به یکی از دو روش انجام می دهید:
- سادهترین : یک شی
MarkerOptions
را مشخص کنید تا روی همه نشانگرهای یک نوع اعمال شود. سپس Consumer SDK این استایل را در دو موقعیت اعمال می کند: قبل از افزودن نشانگرها به نقشه، و زمانی که داده های استفاده شده برای نشانگرها تغییر کرده اند. - پیشرفته تر : یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی سازی امکان استایل نشانگرها را بر اساس داده ها و همچنین افزودن تعامل به نشانگرها، مانند مدیریت کلیک، فراهم می کند. به طور خاص، Consumer SDK دادهها را در مورد نوع شیئی که نشانگر نشان میدهد: وسیله نقلیه یا مقصد، به تابع سفارشیسازی ارسال میکند. سپس این اجازه می دهد تا استایل نشانگر بر اساس وضعیت فعلی خود عنصر نشانگر تغییر کند. به عنوان مثال، تعداد توقف های برنامه ریزی شده باقی مانده تا مقصد. حتی میتوانید به دادههای منابع خارج از Fleet Engine ملحق شوید و نشانگر را بر اساس آن اطلاعات استایل دهید.
مثال ساده: از MarkerOptions
استفاده کنید
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با شیء MarkerOptions
نشان می دهد. این مثال Opacity نشانگر را روی 50% تنظیم می کند.
جاوا اسکریپت
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
مثال پیشرفته: از یک تابع سفارشی سازی استفاده کنید
مثال زیر نحوه پیکربندی استایل نشانگر وسیله نقلیه را برای نمایش تعداد توقف باقیمانده برای وسیله نقلیه قبل از رسیدن به توقف برای کار برنامه ریزی شده نشان می دهد.
جاوا اسکریپت
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
کنترل کلیک را به نشانگرها اضافه کنید
می توانید کنترل کلیک را به هر نشانگری اضافه کنید، مانند مثال زیر برای نشانگر خودرو.
جاوا اسکریپت
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
ایجاد می کند و آن را به نشانگر خودرو متصل می کند:
جاوا اسکریپت
// 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();
بعدش چی
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eCustomize the appearance of delivery vehicle and destination markers on your shipment tracking map using the JavaScript Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eAchieve basic styling by applying \u003ccode\u003eMarkerOptions\u003c/code\u003e to define marker attributes like opacity.\u003c/p\u003e\n"],["\u003cp\u003eImplement dynamic styling and interactivity by using customization functions that adapt marker appearance based on real-time data like remaining stops.\u003c/p\u003e\n"],["\u003cp\u003eEnhance marker interaction with click handling for triggering actions when users click on them.\u003c/p\u003e\n"],["\u003cp\u003eDisplay extra information with \u003ccode\u003eInfoWindow\u003c/code\u003e objects to provide users with context about a specific marker, such as remaining stops for a delivery vehicle.\u003c/p\u003e\n"]]],[],null,["This document covers how to customize vehicle and location markers in the map\nyou use for your web-based shipment tracking app for consumers.\n\nWith the JavaScript Consumer SDK, you can customize the look and feel of two\ntypes of markers added to the map:\n\n- **Delivery vehicle markers** : use [`deliveryVehicleMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.deliveryVehicleMarkerCustomization)\n- **Destination markers** : use [`destinationMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.destinationMarkerCustomization)\n\nYou do this in one of two ways:\n\n- **Simplest** : Specify a [`MarkerOptions`](/maps/documentation/javascript/reference/marker#MarkerOptions) object to apply to all markers of the same type. The Consumer SDK then applies the styling in two situations: before adding the markers to the map, and when the data used for the markers have changed.\n- **More advanced**: Specify a customization function. Customization functions allow for styling of the markers based on data, as well as adding interactivity to markers, such as click handling. Specifically, the Consumer SDK passes data to the customization function about the type of object the marker represents: vehicle or destination. This then allows marker styling to change based on the current state of the marker element itself; for example, the number of planned stops remaining until the destination. You can even join against data from sources outside Fleet Engine and style the marker based on that information.\n\nSimple example: use `MarkerOptions`\n\nThe following example shows how to configure a vehicle marker's styling with a\n`MarkerOptions` object. This example sets the marker opacity to 50%.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdvanced example: use a customization function\n\nThe following example shows how to configure a vehicle marker's styling to\ndisplay the remaining stop count for the vehicle before reaching the stop for\nthe scheduled task.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n var stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n const stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdd click handling to markers\n\nYou can add click handling to any marker, such as in the following example\nfor a vehicle marker.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nDisplay additional information for markers\n\nYou can use an [`InfoWindow`](/maps/documentation/javascript/infowindows) to display additional information about a\nvehicle or location marker. The following example creates an\n`InfoWindow` and attaches it to a vehicle marker:\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', e =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nWhat's next\n\n- [Customize polylines](/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/customize-polylines)"]]