自定义标记

请选择平台： Android iOS JavaScript

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

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

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

   • 旅程分享的数据：历程分享会将标记数据传递给 自定义函数（包括标记所代表的对象类型）： 车辆、出发地、航点或目的地然后，标记样式会根据标记元素的当前状态而发生变化。例如，在车辆完成行程之前剩余的路点数量。

   • 外部来源：您可以将历程分享数据与 Fleet Engine 以外的来源的数据，并根据此设置设置标记的样式。 信息

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

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

标记自定义选项

这两个选项都使用 Google Maps JavaScript API FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

使用 MarkerOptions 更改标记的样式

以下示例展示了如何使用以下代码配置车辆标记样式： 一个 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.
      });
    }
  };

后续步骤

• 自定义路线多段线