借助 JavaScript 舰队跟踪库 添加到地图中的标记。为此，您可以指定标记自定义 车队跟踪库随后会应用该库，然后再向地图添加标记 每次标记更新。您可以在以下位置自定义标记的外观和风格： 方法：
根据类型设置标记样式：指定
MarkerOptions对象来为相同类型的标记设置样式。随后，您指定的更改就会 并覆盖所有默认选项。对于 示例，请参阅根据类型设置标记样式 本指南。根据数据设置标记样式：根据以下内容指定自定义函数 数据，以及向标记添加互动性，例如点击处理。 您可以根据来自车队跟踪或外部来源的数据设置样式：
来自舰队跟踪的数据：舰队跟踪会将数据传递到 自定义函数，包括标记对象的类型 代表车辆、停靠点或任务。然后更改标记样式 对标记元素的当前状态进行标记。例如， 剩余经停点或任务类型。
外部来源：您可以将车队跟踪数据与以下来源的数据结合使用： Fleet Engine 以外的来源，并基于这一点设置标记的样式。 信息
如需查看示例，请参阅根据数据设置标记样式。
为标记添加点击处理功能：相关示例请参见 添加点击处理方式。
过滤显示的标记：过滤要显示的标记 具有在 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);
}
};