自訂標記

選取平台： Android iOS JavaScript

自訂地圖標記的外觀與風格。您可以透過下列兩種方式，自訂地圖標記的外觀和風格：

1. 根據類型設定標記樣式：指定 MarkerOptions 物件，為相同類型的標記設定樣式。系統會在建立每個標記後套用您指定的變更，並覆寫所有預設選項。如需範例，請參閱本指南中的「使用 MarkerOptions 變更標記樣式」一節。

2. 根據資料設定標記樣式：指定自訂函式，根據資料設定標記樣式。您可以根據行程分享資料或外部來源資料設定樣式：

   • 行程分享資料：行程分享功能會將標記資料傳遞至自訂函式，包括標記代表的物件類型：車輛、起點、路線控點或目的地。標記樣式會根據標記元素的目前狀態而改變。例如車輛完成行程前剩餘的路線控點數量。

   • 外部來源：您可以將行程分享資料與 Fleet Engine 外部來源的資料結合，並根據該資訊設定標記樣式。

   如需範例，請參閱本指南的「使用自訂函式變更標記樣式」一節。

3. 為標記新增點擊處理：如需範例，請參閱「新增點擊處理」。

標記自訂選項

這兩種選項都會使用 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.
      });
    }
  };

後續步驟

• 自訂路線折線