自訂標記

本文件說明如何自訂地圖中的車輛和位置標記 所使用的運送追蹤應用程式。

透過 JavaScript Consumer SDK,您可以自訂兩個 已新增至地圖的標記類型:

您可以選擇以下其中一種方法:

  • 最簡單的:指定要套用至所有標記的 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();

後續步驟