自定义标记

请选择平台: Android iOS JavaScript

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

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

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

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

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

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

  3. 为标记添加点击处理功能:例如, 请参阅添加点击处理

标记自定义选项

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

使用 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.
      });
    }
  };

后续步骤