自訂標記

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

後續步驟