自定义标记

本文档介绍了如何在您用于面向消费者的基于网络的货件跟踪应用的地图中自定义车辆和位置标记。

借助 JavaScript Consumer SDK，您可以自定义添加到地图中的两种类型标记的外观和风格：

您可以通过以下两种方式之一来执行此操作：

  • 最简单：指定一个 MarkerOptions 对象，以应用于同一类型的所有标记。然后，Consumer SDK 会在两种情况下应用样式：将标记添加到地图之前，以及用于标记的数据发生变化时。
  • 更高级：指定自定义函数。借助自定义函数，您可以根据数据设置标记的样式，还可以向标记添加互动功能，例如点击处理。具体来说，Consumer SDK 会将有关标记所代表的对象类型（车辆或目的地）的数据传递给自定义函数。这样一来，标记样式便可根据标记元素本身的当前状态而变化；例如，到达目的地之前剩余的计划停靠站数量。您甚至可以根据来自 Fleet Engine 以外来源的数据进行联接，并根据该信息设置标记样式。

简单示例：使用 MarkerOptions

以下示例展示了如何使用 MarkerOptions 对象配置车辆标记的样式。此示例将标记不透明度设置为 50%。

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

高级示例：使用自定义函数

以下示例展示了如何配置车辆标记的样式，以显示车辆在到达预定任务的停靠站之前剩余的停靠站数量。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

为标记添加点击处理功能

您可以向任何标记添加点击处理功能，例如以下车辆标记示例。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

显示与标记有关的更多信息

您可以使用 InfoWindow 显示有关车辆或位置标记的其他信息。以下示例会创建一个 InfoWindow 并将其附加到车辆标记上：

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

后续步骤