自訂地圖標記的外觀與風格。自訂地圖標記的外觀與風格,方法有兩種:
- 根據類型設定標記樣式:指定 - MarkerOptions物件,為相同類型的標記設定樣式。系統會在建立每個標記後套用您指定的變更,覆寫所有預設選項。如需範例,請參閱本指南的「使用- MarkerOptions變更標記樣式」。
- 根據資料設定標記樣式:指定自訂函式,根據資料設定標記樣式。您可以根據行程分享或外部來源的資料設定樣式: - 行程分享資料:行程分享會將標記資料傳遞至自訂函式,包括標記代表的物件類型:車輛、起點、途經點或目的地。標記樣式隨後會根據標記元素的目前狀態而改變。例如車輛完成行程前剩餘的航點數量。 
- 外部來源:您可以將行程分享資料與 Fleet Engine 以外來源的資料合併,並根據該資訊設定標記樣式。 
 - 如需範例,請參閱本指南的「使用自訂函式變更標記樣式」。 
- 在標記中新增點擊處理作業:如需範例,請參閱「新增點擊處理作業」。 
標記自訂選項
這兩種做法都會使用 Google Maps JavaScript API 中的下列自訂參數 (位於 FleetEngineTripLocationProviderOptions 下方):
- vehicleMarkerCustomization
- originMarkerCustomization
- waypointMarkerCustomization
- destinationMarkerCustomization
使用 MarkerOptions 變更標記樣式
以下範例說明如何使用 MarkerOptions 物件設定車輛標記樣式。按照這個模式,使用「標記自訂選項」中列出的任何標記自訂項目,自訂任何標記的樣式。
JavaScript
deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};
使用自訂函式變更標記的樣式
以下範例說明如何使用自訂函式設定車輛標記樣式。請按照這個模式,使用「標記自訂選項」中列出的任何標記自訂參數,自訂任何標記的樣式。
JavaScript
vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };
TypeScript
vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};
在標記中新增點擊處理常式
以下範例說明如何為車輛標記新增點擊處理作業。 使用「標記自訂選項」中列出的任何標記自訂參數,按照這個模式為任何標記新增點擊處理作業。
JavaScript
vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };
TypeScript
vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };