自訂標記

透過 JavaScript 機群追蹤程式庫,您可以自訂外觀和風格 已新增至地圖中的標記。只需指定標記自訂項目即可 然後由車隊追蹤程式庫套用,再新增標記至地圖 並在每次標記更新後您可以在 方法如下:

  1. 根據類型設定標記:指定 MarkerOptions敬上 物件改為設定相同類型的標記樣式。您指定的變更 。適用對象 範例,請參閱「根據類型設定標記樣式」一節, 本指南。

  2. 根據資料設定標記樣式:根據資料指定自訂函式 資料,以及如何在標記中加入互動功能,例如點擊處理。 您可以根據機群追蹤功能或外部來源的資料設定樣式:

    • 機群追蹤資料:機群追蹤功能資料會將資料傳送至 自訂函式,包含標記的物件類型 代表車輛、停靠站或工作標記樣式設定之後有所變更 以標記元素的目前狀態為依據例如 其他停靠站或任務類型

    • 外部來源:您可以將機群追蹤資料與以下來源的資料結合: 並根據該名稱設定標記 資訊

    如需範例,請參閱根據資料設定標記樣式

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

後續步驟