自定义标记
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
自定义添加到地图中的标记的外观和风格。您可以通过以下两种方式自定义添加到地图中的标记的外观和风格:
根据类型设置标记样式:指定一个 MarkerOptions
对象,以设置相同类型标记的样式。然后,在创建每个标记后,系统会应用您指定的更改,覆盖任何默认选项。
如需查看示例,请参阅本指南中的使用 MarkerOptions
更改标记的样式。
根据数据设置标记样式:指定用于根据数据设置标记样式的自定义函数。您可以根据行程分享中的数据或外部来源的数据设置样式:
如需查看示例,请参阅本指南中的使用自定义函数更改标记的样式。
向标记添加点击处理功能:如需查看示例,请参阅添加点击处理功能。
标记自定义选项
这两种选项都使用 Google Maps JavaScript API 中 FleetEngineTripLocationProviderOptions
下的以下自定义参数:
使用 MarkerOptions
更改标记的样式
以下示例展示了如何使用 MarkerOptions
对象配置车辆标记样式。按照此模式,使用标记自定义选项中列出的任何标记自定义设置来自定义任何标记的样式。
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
使用自定义函数更改标记的样式
以下示例展示了如何使用自定义函数配置车辆标记样式。按照此模式,使用标记自定义选项中列出的任何标记自定义参数来自定义任何标记的样式。
JavaScript
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}`);
};
为标记添加点击处理功能
以下示例展示了如何为车辆标记添加点击处理功能。
按照此模式,您可以使用标记自定义选项中列出的任何标记自定义参数,为任何标记添加点击处理功能。
JavaScript
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.
});
}
};
后续步骤
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-31。
[null,null,["最后更新时间 (UTC):2025-08-31。"],[[["\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)"]]