自訂路線折線

本文說明如何自訂地圖上所追蹤車輛的路線外觀與風格。地圖上會以折線繪製路線。針對車輛有效或剩餘路徑中的每組座標，程式庫都會建立 google.maps.Polyline 物件。您可以指定折線自訂項目，為 Polyline 物件設定樣式，程式庫會在下列兩種情況套用這些自訂項目：

  • 將物件新增至地圖前
  • 物件使用的資料有所變更時

設定折線樣式

與自訂標記類似，您可以透過不同方式設定路線折線的樣式：

  1. 依類型設定路線折線樣式：使用 PolylineOptions 在建立或更新相符的 Polyline 物件時，將樣式套用至所有物件。如需範例，請參閱「依類型設定折線樣式」。

  2. 根據資料設定路線折線的樣式：根據車隊追蹤或外部來源的資料，指定自訂函式：

    • 車隊追蹤資料：車隊追蹤功能會將折線資料傳遞至自訂函式，包括目前車輛狀態的資料。您可以根據這項資料設定折線樣式，包括將 Polyline 物件塗上更深的顏色，或是在車輛移動速度較慢時加粗線條。

    • 外部來源：您可以將車隊追蹤資料與 Fleet Engine 以外來源的資料合併，並根據該資訊設定 Polyline 物件的樣式。

    如需範例，請參閱「根據資料設定折線樣式」。

  3. 控制路線折線的顯示設定：您可以使用 visible 屬性隱藏或顯示折線。詳情請參閱本指南的「控管折線的顯示狀態」一節。

  4. 顯示車輛或地點標記的其他資訊： 您可以使用 infowindow 屬性顯示其他資訊。詳情請參閱本指南的「顯示車輛或其他位置標記的其他資訊」一節。

折線自訂選項

以下自訂選項適用於 FleetEngineVehicleLocationProviderOptions 和 FleetEngineDeliveryVehicleLocationProviderOptions。您可以為車輛行駛路徑的不同狀態設定自訂項目：

依類型設定路線折線的樣式

如要依類型設定路線折線的樣式，請使用 PolylineOptions 變更 Polyline 物件的樣式。

以下範例說明如何使用 PolylineOptions 設定 Polyline 物件的樣式。請按照這個模式，使用本指南「折線自訂選項」中列出的任何路徑折線自訂項目，自訂任何 Polyline 物件的樣式。

隨選行程或排定任務的範例

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

使用資料設定路線折線的樣式

如要使用資料設定路線折線的樣式，請使用自訂函式變更 Polyline 物件的樣式。

以下範例說明如何使用自訂函式，設定有效路徑的樣式。請按照這個模式，使用本指南「折線自訂選項」中列出的任何折線自訂參數，自訂任何 Polyline 物件的樣式。

隨選行程範例

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

排定的工作範例

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

考量流量的樣式設定範例 (僅限隨選行程)

Fleet Engine 會傳回所追蹤車輛的現行和剩餘路徑的交通速度資料。你可以根據這項資訊，依據流量速度設定 Polyline 物件的樣式：

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

控管折線的顯示設定

根據預設，所有 Polyline 物件都會顯示。如要讓 Polyline 物件隱形，請將其 visible 屬性設為 false。

隨選行程或排定任務的範例

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

顯示車輛或地點標記的資訊視窗

您可以使用 InfoWindow 顯示車輛或位置標記的其他相關資訊。

以下範例說明如何建立 InfoWindow，並將其附加至車輛標記。

隨選行程範例

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 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});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

排定的工作範例

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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();

後續步驟