自定义标记

借助 JavaScript 舰队跟踪库 添加到地图中的标记。为此，您可以指定标记自定义 车队跟踪库随后会应用该库，然后再向地图添加标记 每次标记更新。您可以在以下位置自定义标记的外观和风格： 方法：

  1. 根据类型设置标记样式：指定 MarkerOptions 对象来为相同类型的标记设置样式。随后，您指定的更改就会 并覆盖所有默认选项。对于 示例，请参阅根据类型设置标记样式 本指南。

  2. 根据数据设置标记样式：根据以下内容指定自定义函数 数据，以及向标记添加互动性，例如点击处理。 您可以根据来自车队跟踪或外部来源的数据设置样式：

    • 来自舰队跟踪的数据：舰队跟踪会将数据传递到 自定义函数，包括标记对象的类型 代表车辆、停靠点或任务。然后更改标记样式 对标记元素的当前状态进行标记。例如， 剩余经停点或任务类型。

    • 外部来源：您可以将车队跟踪数据与以下来源的数据结合使用： Fleet Engine 以外的来源，并基于这一点设置标记的样式。 信息

    如需查看示例，请参阅根据数据设置标记样式。

  3. 为标记添加点击处理功能：相关示例请参见 添加点击处理方式。

  4. 过滤显示的标记：过滤要显示的标记 以及 JavaScript 位置中提供的过滤功能 提供商。例如：

    。

  5. 使用自定义标记来跟踪计划任务交付车辆： 您可以自定义标记来跟踪车辆。有关详情，请参阅使用 自定义标记来跟踪送货车辆。

标记自定义选项

舰队跟踪库提供以下自定义参数：

按需行程自定义参数

计划任务自定义参数

根据类型设置标记样式

以下示例展示了如何使用 一个 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);
    }
  };

后续步骤