自訂標記

本文說明如何自訂地圖中的車輛和地點標記，以用於消費者適用的網路貨運追蹤應用程式。

使用 JavaScript Consumer SDK，您可以自訂新增至地圖的兩種標記外觀與風格：

方法有以下兩種：

  • 最簡單：指定要套用至所有相同類型標記的 MarkerOptions 物件。接著，Consumer SDK 會在兩種情況下套用樣式：將標記新增至地圖前，以及用於標記的資料變更時。
  • 進階：指定自訂函式。自訂函式可根據資料設定標記樣式，並為標記新增互動功能，例如點擊處理。具體來說，Consumer 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();

後續步驟