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 xe được theo dõi trên bản đồ. Các tuyến đường được vẽ trên bản đồ dưới dạng đa tuyến. Đối với mỗi cặp tọa độ trong đường dẫn đang hoạt động hoặc còn lại của 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 tuỳ chỉnh đường đa tuyến mà thư viện sẽ áp dụng trong hai trường hợp:

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

Tạo kiểu cho hình nhiều đường

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

1. Kiểu đường đa tuyến theo loại: Sử dụng PolylineOptions để áp dụng cho tất cả các đối tượng Polyline được so khớp khi các đối tượng đó được tạo hoặc cập nhật. Để biết ví dụ, hãy xem phần Kiểu đường đa tuyến theo loại.

2. Định kiểu đường đa tuyến của tuyến 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 sẽ chuyển dữ liệu đa tuyến đến hàm tuỳ chỉnh, bao gồm cả dữ liệu về trạng thái xe hiện tại. Bạn có thể tạo kiểu cho các đường đa giác dựa trên dữ liệu này, bao gồm cả việc tô màu đối tượng Polyline đậm hơn hoặc làm cho đối tượng này 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 Công cụ quản lý đội xe và tạo kiểu cho đối tượng Polyline dựa trên thông tin đó.

   Để biết ví dụ, hãy xem phần Kiểu đường đa tuyến dựa trên dữ liệu.

3. Kiểm soát chế độ hiển thị của đường đa tuyến đường: Bạn có thể ẩn hoặc hiện đường đa tuyến bằng thuộc tính visible. Để biết thông tin chi tiết, hãy xem phần Kiểm soát chế độ hiển thị của đa tuyế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êm thông tin, hãy xem phần Hiển thị thông tin bổ sung cho một xe hoặc điểm đánh dấu vị trí trong hướng dẫn này.

Các tuỳ chọn tuỳ chỉnh đường đa giác

Các tuỳ chọn tuỳ chỉnh sau đây có trong cả FleetEngineVehicleLocationProviderOptions và FleetEngineDeliveryVehicleLocationProviderOptions. Bạn có thể thiết lập các tuỳ chỉnh cho các trạng thái đường dẫn 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, tham chiếu Nhiệm vụ theo lịch.

• Đường đi đang di chuyển: Sử dụng activePolylineCustomization – Chuyến đi theo yêu cầu, tham chiếu Tác vụ theo lịch.

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

Định kiểu đường đa tuyến của tuyến đường theo loại

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

Ví dụ sau đây cho thấy cách định cấu hình kiểu cho đố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ỳ tuỳ chọn tuỳ chỉnh đường đa tuyến nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh đường đa tuyến trong hướng dẫn này.

Ví dụ về chuyến đi theo yêu cầu hoặc tác vụ theo lịch

JavaScript

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

TypeScript

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

Định kiểu đường đa tuyến của tuyến đường bằng dữ liệu

Để tạo kiểu cho đường đa tuyến đường bằng dữ liệu, hãy thay đổi kiểu của đối tượng Polyline bằng cách sử dụ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 đang hoạt động bằng cách sử dụng hàm tuỳ chỉnh. 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ỳ tham số tuỳ chỉnh đường đa tuyến nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh đường đa tuyế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ề tác vụ được lên lịch

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ề cách tạo kiểu nhận biết tình trạng giao thông (chỉ dành cho chuyến đi theo yêu cầu)

Công cụ xe cộ trả về dữ liệu tốc độ giao thông cho các đường dẫn đ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 đa tuyến

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

Ví dụ về chuyến đi theo yêu cầu hoặc tác vụ theo lịch

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Hiển thị 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 xe hoặc điểm đánh dấu vị trí.

Ví dụ sau đây cho thấy cách tạo InfoWindow và đính kèm InfoWindow đó vào đ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ề tác vụ được lên lịch

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