自訂路線折線

本文將說明如何在地圖上自訂追蹤車輛的路線外觀。路線是以折線形式繪製在地圖上。針對每組 位於車輛活躍或剩餘路徑中的座標，程式庫就會建立 google.maps.Polyline 物件。 您可以指定會自訂的折線自訂項目，藉此設定 Polyline 物件的樣式 程式庫會在以下兩種情況中套用：

  • 在將物件加入地圖之前
  • 當物件使用的資料有所變更時

設定折線樣式

與自訂標記的方式類似，只要在 方法如下：

  1. 依類型設定路線折線的樣式：使用 PolylineOptions敬上 才會套用至所有相符 Polyline 物件 如需範例，請參閱「依類型設定折線樣式」。

  2. 根據資料設定路線折線的樣式：指定自訂函式 根據機群追蹤資料或其他外部來源的資料計算而得：

    • 機群追蹤資料：車隊追蹤功能會將折線資料傳送至 自訂功能，包括目前車輛的資料 時間。您可以根據這些資料設定折線的樣式，包括著色。 Polyline 物件是更深層的陰影，或當物件位於 車輛移動速度較慢

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

    範例請參見根據資料設定折線樣式。

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

  4. 顯示車輛或地點標記的其他資訊： 你可以使用 infowindow 屬性顯示其他資訊。適用對象 詳細資料，請參閱 顯示車輛或地點標記的其他資訊： 本指南。

折線自訂選項

以下是這兩種格式的自訂選項 FleetEngineVehicleLocationProviderOptions敬上 和 FleetEngineDeliveryVehicleLocationProviderOptions。 您可以自訂車輛中不同路徑狀態的自訂設定 旅程：

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

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

以下範例說明如何設定 Polyline 物件的樣式 使用 PolylineOptions。請按照此模式自訂任一樣式的樣式 使用下列任一路徑折線自訂選項的 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();

後續步驟