透過 JavaScript 機群追蹤程式庫，您可以自訂外觀和風格 已新增至地圖中的標記。只需指定標記自訂項目即可 然後由車隊追蹤程式庫套用，再新增標記至地圖 並在每次標記更新後您可以在 方法如下：
根據類型設定標記：指定
MarkerOptions敬上 物件改為設定相同類型的標記樣式。您指定的變更 。適用對象 範例，請參閱「根據類型設定標記樣式」一節， 本指南。根據資料設定標記樣式：根據資料指定自訂函式 資料，以及如何在標記中加入互動功能，例如點擊處理。 您可以根據機群追蹤功能或外部來源的資料設定樣式：
機群追蹤資料：機群追蹤功能資料會將資料傳送至 自訂函式，包含標記的物件類型 代表車輛、停靠站或工作標記樣式設定之後有所變更 以標記元素的目前狀態為依據例如 其他停靠站或任務類型
外部來源：您可以將機群追蹤資料與以下來源的資料結合： 並根據該名稱設定標記 資訊
如需範例，請參閱根據資料設定標記樣式。
在標記中加入點擊處理方式：範例請參見 新增點擊處理。
篩選可見的標記：篩選要顯示的標記 以及 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);
}
};