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 được theo dõi phương tiện trên bản đồ. Tuyến đường được vẽ trên bản đồ theo hình nhiều đường. Đối với mỗi cặp toạ độ 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 cách tuỳ chỉnh hình nhiều đường thì 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 trong các cách khác nhau:

1. Tạo kiểu hình nhiều đường theo loại: Sử dụng PolylineOptions để áp dụng cho tất 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 nhiều đường theo loại.

2. Hình nhiều đường định tuyến kiểu dựa trên dữ liệu: Chỉ định hàm tuỳ chỉnh dựa trên dữ liệu theo dõi hệ thống thiết bị hoặc từ các nguồn bên ngoài:

   • Dữ liệu từ hoạt động theo dõi đội phương tiện vận chuyển: Tính năng theo dõi đội phương tiện truyền dữ liệu nhiều tuyến đến chức năng tuỳ chỉnh, trong đó có dữ liệu về xe hiện tại trạng thá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 đối tượng Polyline có màu đậm hơn hoặc làm cho đối tượng đó dày hơn khi xe đang chuyển động chậm hơn.

   • Nguồn bên ngoài: Bạn có thể kết hợp dữ liệu theo dõi nhóm thiết bị với dữ liệu từ lấy nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượng Polyline dựa trên đó của bạn.

   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 thị hình nhiều đường bằng thuộc tính visible. Để biết thông tin chi tiết, hãy xem 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 điểm đánh dấu xe hoặc vị trí: Bạn có thể hiển thị thêm thông tin bằng cách sử dụng thuộc tính infowindow. Cho chi tiết, xem Hiển thị thông tin bổ sung cho điểm đánh dấu xe hoặc 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ả hai nền tảng FleetEngineVehicleLocationProviderOptions và FleetEngineDeliveryVehicleLocationProviderOptions. Bạn có thể thiết lập chế độ tuỳ chỉnh cho nhiều trạng thái lộ trình trong hành trình:

• Đường dẫn đã đi: Sử dụng takenPolylineCustomization - Tài liệu tham khảo về Chuyến đi theo yêu cầu, Việc cần làm đã lên lịch.

• Đường đi chủ động: Sử dụng activePolylineCustomization - Tài liệu tham khảo về Chuyến đi theo yêu cầu, Việc cần làm đã lên lịch.

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

Tạo kiểu hình nhiều đường theo loại

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

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

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

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

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

Tạo kiểu hình nhiều đường bằng dữ liệu

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

Ví dụ sau cho biết cách định cấu hình định kiểu cho một tuyến đang hoạt động bằng chức năng tuỳ chỉnh. Làm theo mẫu này để tuỳ chỉnh kiểu cho bất kỳ đối tượng Polyline nào bằng cách sử dụng các tham số tuỳ chỉnh hình nhiều đường được liệt kê trong các tuỳ chọn tuỳ chỉnh hình nhiều đường trong hướng dẫn này.

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

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

// 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

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

// 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 lưu lượng truy cập (chỉ dành cho những chuyến đi theo yêu cầu)

Fleet Engine trả về dữ liệu tốc độ giao thông cho đường dẫn đang hoạt động và đường dẫn còn lại cho chiếc xe bị đuổi theo. Bạn có thể dùng thông tin này để tạo kiểu cho Polyline theo tốc độ lưu lượng truy cập của chúng:

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

// 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ị hình nhiều đường

Theo mặc định, tất cả đối tượng Polyline đều hiển thị. Cách tạo đối tượng Polyline ẩn, đặt thuộc tính visible 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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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

Bạn có thể sử dụng InfoWindow để hiển thị thêm thông tin về xe hoặc điểm đánh dấu vị trí.

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

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

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

// 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

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

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

Các bước tiếp theo

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