自訂路線折線

本文件說明如何在地圖上自訂追蹤車輛的路線外觀。路線會以折線繪製在地圖上。針對車輛的有效或剩餘路徑中的每個座標組合，程式庫都會建立 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();

後續步驟