نشانگرها را سفارشی کنید
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
پلتفرم را انتخاب کنید: Android iOS JavaScript ظاهر و احساس نشانگرهای اضافه شده به نقشه را سفارشی کنید. ظاهر و احساس نشانگرهای اضافه شده به نقشه را به دو روش سفارشی کنید:
نشانگرهای سبک بر اساس نوع : یک شی MarkerOptions را برای نشانگرهای سبک از همان نوع مشخص کنید. سپس تغییراتی که مشخص می‌کنید پس از ایجاد هر نشانگر اعمال می‌شوند و گزینه‌های پیش‌فرض را بازنویسی می‌کنند. برای مثال، به تغییر سبک نشانگرها با استفاده از MarkerOptions در این راهنما مراجعه کنید.
نشانگرهای سبک بر اساس داده ها : یک تابع سفارشی سازی برای استایل نشانگرها بر اساس داده ها مشخص کنید. می‌توانید بر اساس داده‌های اشتراک‌گذاری سفر، یا از منابع خارجی، استایل‌سازی کنید:
داده‌های حاصل از اشتراک‌گذاری سفر : اشتراک‌گذاری سفر، داده‌های نشانگر را به تابع سفارشی‌سازی از جمله نوع شیئی که نشانگر نشان می‌دهد: وسیله نقلیه، مبدا، نقطه بین راه یا مقصد، ارسال می‌کند. سپس استایل نشانگر بر اساس وضعیت فعلی عنصر نشانگر تغییر می کند. به عنوان مثال، تعداد ایستگاه های بین راهی باقی مانده تا زمانی که وسیله نقلیه سفر را به پایان برساند.
منابع خارجی : می‌توانید داده‌های اشتراک‌گذاری سفر را با داده‌های منابع خارج از Fleet Engine ترکیب کنید و نشانگر را نیز بر اساس آن اطلاعات استایل دهید.
برای مثال، به تغییر سبک نشانگرها با استفاده از توابع سفارشی سازی در این راهنما مراجعه کنید.
افزودن کنترل کلیک به نشانگرها : برای مثال، به افزودن مدیریت کلیک مراجعه کنید.
گزینه های سفارشی سازی نشانگر
هر دو گزینه از پارامترهای سفارشی سازی زیر در Google Maps JavaScript API تحت FleetEngineTripLocationProviderOptions استفاده می کنند:
با استفاده از MarkerOptions استایل نشانگرها را تغییر دهید
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با یک شی MarkerOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های نشانگر فهرست‌شده در گزینه‌های سفارشی‌سازی نشانگر، استایل هر نشانگر را سفارشی کنید.
جاوا اسکریپت
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
با استفاده از توابع سفارشی‌سازی، استایل نشانگرها را تغییر دهید
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با استفاده از توابع سفارشی‌سازی نشان می‌دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی‌سازی نشانگر فهرست شده در گزینه‌های سفارشی‌سازی نشانگر، استایل هر نشانگر را سفارشی کنید.
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
کنترل کلیک را به نشانگرها اضافه کنید
مثال زیر نشان می دهد که چگونه می توان کنترل کلیک را به نشانگر خودرو اضافه کرد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی‌سازی نشانگر فهرست شده در گزینه‌های سفارشی‌سازی نشانگر، مدیریت کلیک را به هر نشانگری اضافه کنید.
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
بعدش چی
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eCustomize the look and feel of markers on the map based on marker type or underlying data like trip progress.\u003c/p\u003e\n"],["\u003cp\u003eUse \u003ccode\u003eMarkerOptions\u003c/code\u003e objects to style markers by type, such as setting the cursor for delivery vehicle markers.\u003c/p\u003e\n"],["\u003cp\u003eUse customization functions to style markers dynamically based on trip data, like displaying remaining waypoints.\u003c/p\u003e\n"],["\u003cp\u003eImplement custom click handling for markers to trigger specific actions when a user interacts with them.\u003c/p\u003e\n"],["\u003cp\u003eLeverage \u003ccode\u003eFleetEngineTripLocationProviderOptions\u003c/code\u003e to access marker customization parameters like \u003ccode\u003evehicleMarkerCustomization\u003c/code\u003e.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/customize-markers \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/customize-markers \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-markers \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nCustomize the look and feel of markers added to the map. Customize the look\nand feel of markers added to the map in two ways:\n\n1. **Style markers based on type** : Specify a\n [`MarkerOptions`](/maps/documentation/javascript/reference/marker#MarkerOptions)\n object to style markers of the same type. The changes you specify are\n then applied after each marker is created, overwriting any default options.\n For examples, see\n [Change the styling of markers using `MarkerOptions`](#markeropt) in this\n guide.\n\n2. **Style markers based on data**: Specify a customization function to\n style markers based on data. You can style based on data from journey\n sharing, or from outside sources:\n\n - **Data from trip sharing**: Trip sharing passes marker data to the\n customization function including the type of object the marker represents:\n vehicle, origin, waypoint or destination. Marker styling then changes\n based on the current state of the marker element. For example, the number\n of waypoints remaining until the vehicle finishes the trip.\n\n - **Outside sources**: You can combine the trip sharing data with\n data from sources outside Fleet Engine and style the marker based on that\n information as well.\n\n For examples, see\n [Change the styling of markers using customization functions](#vehicle-markers)\n in this guide.\n3. **Add click handling to markers** : For examples,\n see [Add click handling](#add-click).\n\nMarker customization options\n\nBoth options use the following customization parameters in the Google\nMaps JavaScript API under\n[`FleetEngineTripLocationProviderOptions`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions):\n\n- [`vehicleMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.vehicleMarkerCustomization)\n- [`originMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.originMarkerCustomization)\n- [`waypointMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.waypointMarkerCustomization)\n- [`destinationMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress#FleetEngineTripLocationProviderOptions.destinationMarkerCustomization)\n\nChange the styling of markers using `MarkerOptions`\n\nThe following example shows how to configure vehicle marker styling with\na `MarkerOptions` object. Follow this pattern to customize the styling of any\nmarker using any of the marker customizations listed in\n[Marker customization options](#cust-options). \n\nJavaScript \n\n deliveryVehicleMarkerCustomization = {\n cursor: 'grab'\n };\n\nTypeScript \n\n deliveryVehicleMarkerCustomization = {\n cursor: 'grab'\n };\n\nChange the styling of markers using customization functions\n\nThe following example shows how to configure vehicle marker styling using\ncustomization functions. Follow this pattern to customize the styling of any\nmarker using any of the marker customization parameters listed in\n[Marker customization options](#cust-options). \n\nJavaScript \n\n vehicleMarkerCustomization =\n (params) =\u003e {\n var distance = params.trip.remainingWaypoints.length;\n params.marker.setLabel(`${distance}`);\n };\n\nTypeScript \n\n vehicleMarkerCustomization =\n (params: TripMarkerCustomizationFunctionParams) =\u003e {\n const distance = params.trip.remainingWaypoints.length;\n params.marker.setLabel(`${distance}`);\n };\n\nAdd click handling to markers\n\nThe following example shows how to add click handling to a vehicle marker.\nFollow this pattern to add click handling to any marker using any of the marker\ncustomization parameters listed in [Marker customization options](#cust-options). \n\nJavaScript \n\n vehicleMarkerCustomization =\n (params) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\nTypeScript \n\n vehicleMarkerCustomization =\n (params: TripMarkerCustomizationFunctionParams) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\nWhat's next\n\n- [Customize route polylines](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-route-polylines)"]]
