Tuỳ chỉnh hình nhiều đường

Tài liệu này trình bày cách tuỳ chỉnh giao diện của các tuyến đường cho những chiếc xe được theo dõi trên bản đồ. Các tuyến đường được vẽ trên bản đồ dưới dạng đường nhiều đoạn. Đối với mỗi cặp toạ độ trong đường dẫn đang hoạt động hoặc còn lại của một chiếc xe, thư viện sẽ tạo một đối tượng google.maps.Polyline. Bạn có thể tạo kiểu cho các đối tượng Polyline bằng cách chỉ định các chế độ tuỳ chỉnh đường nhiều đoạn mà thư viện sẽ áp dụng trong 2 trường hợp:

• Trước khi thêm các đối tượng vào bản đồ
• Khi dữ liệu được dùng cho các đối tượng đã thay đổi

Tạo kiểu cho đường nhiều đoạn

Tương tự như cách tuỳ chỉnh điểm đánh dấu, bạn có thể tạo kiểu cho nhiều đường trên tuyến đường theo nhiều cách:

1. Tạo kiểu cho đường nhiều đoạn của tuyến đường theo loại: Sử dụng PolylineOptions để áp dụng cho tất cả các đối tượng Polyline phù hợp khi chúng được tạo hoặc cập nhật. Để biết ví dụ, hãy xem phần Tạo kiểu cho nhiều đường bằng loại.

2. Tạo kiểu cho nhiều đường trên tuyến đường dựa trên dữ liệu: Chỉ định một hàm tuỳ chỉnh dựa trên dữ liệu từ tính năng theo dõi đội xe hoặc từ các nguồn bên ngoài:

   • Dữ liệu từ tính năng theo dõi đội xe: Tính năng theo dõi đội xe truyền dữ liệu đường nhiều đoạn đến hàm tuỳ chỉnh, bao gồm cả dữ liệu về trạng thái hiện tại của xe. Bạn có thể tạo kiểu cho các đường nhiều đoạn dựa trên dữ liệu này, bao gồm cả việc tô màu cho đối tượng Polyline thành một sắc thái đậm hơn hoặc làm cho đối tượng đó dày hơn khi xe di chuyển chậm hơn.

   • Nguồn bên ngoài: Bạn có thể kết hợp dữ liệu theo dõi đội xe với dữ liệu từ các nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượng Polyline dựa trên thông tin đó.

   Để xem ví dụ, hãy xem phần Tạo kiểu cho nhiều đường dựa trên dữ liệu.

3. Kiểm soát chế độ hiển thị của đường nhiều đoạn: Bạn có thể ẩn hoặc hiện đường nhiều đoạn bằng cách sử dụng thuộc tính visible. Để biết thông tin chi tiết, hãy xem phần Kiểm soát khả năng hiển thị của đường nhiều đoạn trong hướng dẫn này.

4. Hiển thị thông tin bổ sung cho một xe hoặc điểm đánh dấu vị trí: Bạn có thể hiển thị thông tin bổ sung bằng cách sử dụng thuộc tính infowindow. Để biết thông tin chi tiết, hãy xem phần Hiển thị thông tin bổ sung cho một điểm đánh dấu vị trí hoặc xe trong hướng dẫn này.

Các lựa chọn tuỳ chỉnh cho đường nhiều đoạn

Bạn có thể tuỳ chỉnh các lựa chọn sau đây trong cả FleetEngineVehicleLocationProviderOptions và FleetEngineDeliveryVehicleLocationProviderOptions. Bạn có thể đặt chế độ tuỳ chỉnh cho các trạng thái đường đi khác nhau trong hành trình của xe:

• Đường đã đi: Sử dụng takenPolylineCustomization – Chuyến đi theo yêu cầu, Nhiệm vụ theo lịch.

• Đường đi đang hoạt động: Sử dụng activePolylineCustomization – Chuyến đi theo yêu cầu, Tác vụ theo lịch.

• Đường chưa đi: Sử dụng remainingPolylineCustomization – Chuyến đi theo yêu cầu, tài liệu tham khảo về Tác vụ theo lịch.

Tạo kiểu cho đường nhiều đoạn của tuyến đường theo loại

Để tạo kiểu cho các đường nhiều đoạn của tuyến đường theo loại, hãy thay đổi kiểu của các đối tượng Polyline bằng cách sử dụng PolylineOptions.

Ví dụ sau đây cho thấy cách định cấu hình kiểu cho một đối tượng Polyline bằng PolylineOptions. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ đối tượng Polyline nào bằng cách sử dụng bất kỳ chế độ tuỳ chỉnh đường nhiều đoạn nào được liệt kê trong phần Các lựa chọn tuỳ chỉnh đường nhiều đoạn trong hướng dẫn này.

Ví dụ cho các chuyến đi theo yêu cầu hoặc các nhiệm vụ theo lịch

JavaScript

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

TypeScript

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

Tạo kiểu cho đường nhiều đoạn của tuyến đường bằng dữ liệu

Để tạo kiểu cho các đường nhiều đoạn của tuyến đường bằng dữ liệu, hãy thay đổi kiểu của các đối tượng Polyline bằng các hàm tuỳ chỉnh.

Ví dụ sau đây cho thấy cách định cấu hình kiểu cho một tuyến đường đang hoạt động bằng cách sử dụng một hàm tuỳ chỉnh. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của mọi đối tượng Polyline bằng cách sử dụng bất kỳ tham số tuỳ chỉnh đường nhiều đoạn nào được liệt kê trong phần Các lựa chọn tuỳ chỉnh đường nhiều đoạn trong hướng dẫn này.

Ví dụ về chuyến đi theo yêu cầu

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

Ví dụ về nhiệm vụ định kỳ

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

Ví dụ về kiểu dáng dựa trên thông tin giao thông (chỉ dành cho chuyến đi theo yêu cầu)

Fleet Engine trả về dữ liệu tốc độ giao thông cho các đường đi đang hoạt động và còn lại của xe được theo dõi. Bạn có thể sử dụng thông tin này để tạo kiểu cho các đối tượng Polyline theo tốc độ lưu lượng truy cập:

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

Kiểm soát chế độ hiển thị của đường nhiều đoạn

Theo mặc định, tất cả các đối tượng Polyline đều hiển thị. Để ẩn một đối tượng Polyline, hãy đặt thuộc tính visible của đối tượng đó thành false.

Ví dụ cho các chuyến đi theo yêu cầu hoặc các nhiệm vụ theo lịch

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Hiển thị một cửa sổ thông tin cho một phương tiện hoặc điểm đánh dấu vị trí

Bạn có thể sử dụng InfoWindow để hiển thị thông tin bổ sung về một phương tiện hoặc điểm đánh dấu vị trí.

Ví dụ sau đây cho thấy cách tạo một InfoWindow và đính kèm InfoWindow đó vào một điểm đánh dấu xe.

Ví dụ về chuyến đi theo yêu cầu

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

Ví dụ về nhiệm vụ định kỳ

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

Bước tiếp theo

• Tạo kiểu cho bản đồ
• Tuỳ chỉnh điểm đánh dấu