自定义标记

请选择平台： Android iOS JavaScript

自定义添加到地图的标记的外观和风格。您可以通过以下两种方式自定义添加到地图的标记的外观 和风格：

1. 根据类型设置标记的样式：指定 MarkerOptions 对象，以设置相同类型标记的样式。您指定的更改会 在每个标记创建后应用，并覆盖任何默认选项。 如需查看示例，请参阅本 指南中的使用 更改标记的样式。MarkerOptions

2. 根据数据设置标记的样式：指定自定义函数，以 根据数据设置标记的样式。您可以根据行程 共享中的数据或外部来源的数据设置样式：

   • 行程共享中的数据：行程共享会将标记数据传递给 自定义函数，包括标记所代表的对象类型： 车辆、起点、途经点或目的地。然后，标记样式会根据标记元素的当前状态而变化 。例如，车辆完成行程前剩余的途经点数量 。

   • 外部来源：您可以将行程共享数据与 Fleet Engine 外部来源的数据相结合，并根据这些 信息设置标记的样式。

   如需查看示例，请参阅本指南中的 使用自定义函数更改标记的样式 。

3. 为标记添加点击处理功能：如需查看示例， 请参阅添加点击处理功能。

标记自定义选项

这两个选项都在 Google Maps JavaScript API 的 FleetEngineTripLocationProviderOptions下使用以下自定义参数：

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

使用 MarkerOptions 更改标记的样式

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

后续步骤

• 自定义路线折线