本文將說明如何在消費者使用的網頁運送追蹤應用程式中，自訂地圖中的車輛和地點標記。
有了 JavaScript Consumer SDK，您就可以自訂新增至地圖的兩種標記的外觀與風格：
- 運送車輛標記：使用
deliveryVehicleMarkerCustomization - 目的地標記：使用
destinationMarkerCustomization
您可以透過以下任一方式執行這項操作：
- 最簡單：指定
MarkerOptions物件，套用至所有同類型的標記。接著，Consumer SDK 會在兩種情況下套用樣式：在將標記新增至地圖之前，以及標記所用資料變更時。 - 進階：指定自訂函式。自訂化功能可讓您根據資料設定標記樣式，並為標記新增互動功能，例如點擊處理。具體來說，Consumer SDK 會將資料傳遞至自訂函式，說明標記代表的物件類型：車輛或目的地。這樣一來，標記樣式就能根據標記元素本身的目前狀態進行變更，例如，到達目的地前所需的預定停靠站數量。您甚至可以彙整來自 Fleet Engine 以外來源的資料，並根據該資訊設定標記樣式。
簡單範例：使用 MarkerOptions
以下範例說明如何使用 MarkerOptions 物件設定車輛標記的樣式。這個範例會將標記的不透明度設為 50%。
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
進階範例：使用自訂函式
以下範例說明如何設定車輛標記的樣式，以便在車輛抵達預定任務停靠站前，顯示車輛的剩餘停靠站數。
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
為標記新增點擊處理
您可以為任何標記新增點擊處理，例如下列車輛標記的範例。
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
顯示標記的其他資訊
您可以使用 InfoWindow 顯示車輛或位置標記的其他資訊。以下範例會建立 InfoWindow，並將其附加至車輛標記：
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();