借助 JavaScript 舰队跟踪库 添加到地图中的标记。为此，您可以指定标记自定义 车队跟踪库随后会应用该库，然后再向地图添加标记 每次标记更新。您可以在以下位置自定义标记的外观和风格： 方法：
根据类型设置标记样式：指定
MarkerOptions对象以设置同一类型的标记的样式。随后，您指定的更改就会 并覆盖所有默认选项。如需查看示例，请参阅本指南中的基于类型的样式标记。根据数据设置标记样式：根据数据指定自定义函数，并为标记添加互动性（例如点击处理）。您可以根据车队跟踪数据或外部来源的数据设置样式：
来自车队跟踪的数据：车队跟踪会将数据传递给自定义函数，包括标记代表的对象类型：车辆、经停点或任务。然后更改标记样式 对标记元素的当前状态进行标记。例如，剩余经停点的数量或任务类型。
外部来源：您可以将车队跟踪数据与来自车队引擎以外来源的数据组合，还可以根据这些信息设置标记的样式。
如需查看示例，请参阅基于数据设置标记的样式。
为标记添加点击处理功能：相关示例请参见 添加点击处理方式。
过滤显示的标记：过滤出要显示的标记 具有在 JavaScript 位置中提供的过滤功能 提供商。例如：
使用自定义标记来跟踪计划任务交付车辆： 您可以自定义标记来跟踪车辆。有关详情，请参阅使用 自定义标记来跟踪送货车辆。
标记自定义选项
车队跟踪库提供以下自定义参数：
按需行程自定义参数
安排的任务自定义参数
根据类型设置标记样式
以下示例展示了如何使用 MarkerOptions 对象配置车辆标记的样式。按照此模式，使用标记自定义选项中列出的任何选项自定义任何标记的样式。
按需行程示例
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
计划任务示例
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
根据数据设置标记样式
以下示例展示了如何使用 自定义功能按照此模式，使用上文中列出的标记自定义选项中的任一选项，根据数据自定义任何标记的样式。
按需行程示例
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
计划任务示例
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
为标记添加点击处理
以下示例展示了如何为车辆标记添加点击处理。 按照此模式使用任意 部分中列出的标记自定义选项部分中列出的选项。
按需行程示例
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
计划任务示例
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
过滤显示哪些标记
如果您需要使用 setVisible，请遵循此模式来过滤所有标记
使用上面标记自定义选项中列出的任意选项。
按需行程示例
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
计划任务示例
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};