自訂標記

有了 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);
    }
  };

後續步驟