透過 JavaScript 機群追蹤程式庫，您可以自訂外觀和風格 已新增至地圖中的標記。只需指定標記自訂項目即可 然後由車隊追蹤程式庫套用，再新增標記至地圖 並在每次標記更新後您可以透過下列方式自訂標記的外觀和風格：
依類型設定標記樣式：指定
MarkerOptions物件，以設定同類型標記的樣式。系統會在建立每個標記後套用您指定的變更，覆寫任何預設選項。適用對象 範例，請參閱「根據類型設定標記樣式」一節， 本指南。根據資料設定標記樣式：根據資料指定自訂函式 資料，以及如何在標記中加入互動功能，例如點擊處理。 您可以根據車隊追蹤或外部來源的資料設定樣式：
機群追蹤資料：機群追蹤功能資料會將資料傳送至 自訂函式，包含標記的物件類型 代表車輛、停靠站或工作標記樣式會根據標記元素的目前狀態而變更。例如剩餘停靠站數量或任務類型。
外部來源：您可以將車隊追蹤資料與 Fleet Engine 以外來源的資料結合，並根據這些資訊設定標記樣式。
如需範例，請參閱「根據資料設定標記樣式」。
為標記新增點擊處理機制：如需範例，請參閱「新增點擊處理機制」。
篩選顯示哪些標記：使用 JavaScript 位置供應器提供的篩選功能，篩選要顯示的標記。例如：
使用標記自訂功能追蹤已排定的工作運送車輛： 你可以自訂標記來追蹤車輛。詳情請參閱使用 自訂標記，用於追蹤貨運車輛。
標記自訂選項
機群追蹤程式庫提供下列自訂參數：
隨選行程自訂參數
排定工作自訂參數
依據類型設定標記樣式
以下範例說明如何透過
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);
}
};