自訂標記

選取平台: Android iOS JavaScript

自訂新增至地圖標記的外觀和風格。自訂外觀 標記加入地圖的方式有兩種:

  1. 根據類型設定標記:指定 MarkerOptions 物件改為設定相同類型的標記樣式。您指定的變更 並會在每個標記建立後套用,覆寫任何預設選項。 如需範例,請參閱 在此處,使用 MarkerOptions 變更標記樣式 指南。

  2. 根據資料設定標記樣式:指定自訂函式, 樣式標記。您可以根據歷程中的資料設定樣式 或來自外部來源:

    • 分享歷程的資料:歷程分享會將標記資料傳送給 自訂函式,包括標記所代表的物件類型: 例如車輛、出發地、路線控點或目的地標記樣式設定之後有所變更 以標記元素的目前狀態為依據例如 直到車輛完成行程為止的剩餘路線控點

    • 外部來源:您可以將歷程共用資料與 並根據 Fleet Engine 之外的來源資料調整標記樣式 資訊

    如需範例,請參閱 使用自訂函式變更標記樣式 部分

  3. 在標記中加入點擊處理方式:例如, 請參閱「新增點擊處理」。

標記自訂選項

這兩種方式在 Google Analytics 中 Maps JavaScript API FleetEngineTripLocationProviderOptions

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

後續步驟