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