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 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 hình nhiều đường theo tuyến đường theo nhiều cách:

  1. Nhiều đường định tuyến kiểu theo loại: Sử dụng PolylineOptions để áp dụng cho tất cả đối tượng Polyline trùng 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ừ hoạt động theo dõi đội xe: Tính năng theo dõi đội phương tiện truyền dữ liệu nhiều 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 hình nhiều đường 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 bóng sâu hơn hoặc làm cho đối tượng đó dày hơn khi xe đang 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 Hình nhiều đường dựa trên dữ liệu.

  3. Kiểm soát chế độ hiển thị của hình nhiều đường: Bạn có thể ẩn hoặc hiện hình nhiều đường 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ị hình nhiều đường 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.

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

Các tuỳ chọn tuỳ chỉnh sau đây có trong cả FleetEngineVehicleLocationProviderOptionsFleetEngineDeliveryVehicleLocationProviderOptions. Bạn có thể đặt chế độ tuỳ chỉnh cho nhiều trạng thái đường dẫn trong hành trình của xe:

Đị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 các hình nhiều đường định tuyến bằng dữ liệu, hãy thay đổi kiểu của đố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 đ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ề việc cần làm đã 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 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 tác vụ đã lên lịch

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

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

Bạn có thể dùng InfoWindow để hiện thêm thông tin về 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ề việc cần làm đã 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