本文件說明如何自訂地圖中的車輛和位置標記 所使用的運送追蹤應用程式。
透過 JavaScript Consumer SDK，您可以自訂兩個 已新增至地圖的標記類型：
- 交車標記：使用
deliveryVehicleMarkerCustomization - 目的地標記：使用
destinationMarkerCustomization
您可以選擇以下其中一種方法：
- 最簡單的：指定要套用至所有標記的
MarkerOptions物件 同類型資源然後 Consumer SDK 會在 情況： 加入標記到地圖之前，以及使用資料時 的 則訊息已變更。 - 進階：指定自訂函式。自訂函式 可依據資料設定標記樣式，並新增 點擊處理等標記的互動方式。具體而言， 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();