自定义标记

借助 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);
    }
  };

后续步骤