Tuỳ chỉnh điểm đánh dấu

Với thư viện theo dõi nhóm JavaScript, bạn có thể tuỳ chỉnh giao diện của các điểm đánh dấu được thêm vào bản đồ. Bạn thực hiện việc này bằng cách chỉ định các tuỳ chỉnh điểm đánh dấu mà thư viện theo dõi đội xe sẽ áp dụng trước khi thêm điểm đánh dấu vào bản đồ và với mọi lần cập nhật điểm đánh dấu. Bạn có thể tuỳ chỉnh giao diện của điểm đánh dấu theo những cách sau:

1. Điểm đánh dấu kiểu dựa trên loại: Chỉ định đối tượng MarkerOptions cho các điểm đánh dấu kiểu cùng loại. Những thay đổi mà bạn chỉ định sẽ được áp dụng sau khi mỗi điểm đánh dấu được tạo, ghi đè mọi tuỳ chọn mặc định. Để biết ví dụ, hãy xem phần Điểm đánh dấu kiểu dựa trên loại trong hướng dẫn này.

2. Đánh dấu kiểu dựa trên dữ liệu: Chỉ định một hàm tuỳ chỉnh dựa trên dữ liệu, cũng như thêm khả năng tương tác vào các điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Bạn có thể tạo kiểu 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 đến hàm tuỳ chỉnh, bao gồm cả loại đối tượng mà điểm đánh dấu đại diện: phương tiện, điểm dừng hoặc nhiệm vụ. Sau đó, kiểu điểm đánh dấu sẽ thay đổi dựa trên trạng thái hiện tại của phần tử điểm đánh dấu. Ví dụ: số lượng điểm dừng còn lại hoặc loại tác vụ.

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

   Để biết ví dụ, hãy xem phần Điểm đánh dấu kiểu dựa trên dữ liệu.

3. Thêm cách xử lý lượt nhấp vào điểm đánh dấu: Để biết ví dụ, hãy xem bài viết Thêm cách xử lý lượt nhấp.

4. Lọc điểm đánh dấu hiển thị: Lọc điểm đánh dấu sẽ xuất hiện bằng các khả năng lọc có sẵn trong trình cung cấp vị trí JavaScript. Ví dụ:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. Sử dụng tính năng tuỳ chỉnh điểm đánh dấu để theo dõi xe phân phối công việc theo lịch: Bạn có thể tuỳ chỉnh điểm đánh dấu để theo dõi xe. Để biết thêm thông tin, hãy xem bài viết Sử dụng tính năng tuỳ chỉnh điểm đánh dấu để theo dõi xe giao hàng.

Các tuỳ chọn tuỳ chỉnh điểm đánh dấu

Thư viện theo dõi đội xe cung cấp các tham số tuỳ chỉnh sau:

Thông số tuỳ chỉnh chuyến đi theo yêu cầu

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Thông số tuỳ chỉnh cho tác vụ được lên lịch

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Điểm đánh dấu kiểu dựa trên loại

Ví dụ sau đây cho thấy cách định cấu hình kiểu của điểm đánh dấu xe bằng đối tượng MarkerOptions. Làm theo mẫu này để tuỳ chỉnh kiểu của mọi điểm đánh dấu bằng cách sử dụng tuỳ chọn bất kỳ được liệt kê trong Tuỳ chọn tuỳ chỉnh điểm đánh dấu.

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Ví dụ về việc cần làm đã lên lịch

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Điểm đánh dấu kiểu dựa trên dữ liệu

Ví dụ sau đây cho thấy cách định cấu hình kiểu của điểm đánh dấu xe bằng các 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ểm đánh dấu nào dựa trên dữ liệu bằng cách sử dụng bất kỳ tuỳ chọn nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh điểm đánh dấu ở trên.

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

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Ví dụ về việc cần làm đã lên lịch

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Thêm thao tác nhấp chuột vào điểm đánh dấu

Ví dụ sau đây trình bày cách thêm thao tác nhấp vào điểm đánh dấu xe. Hãy làm theo mẫu này để thêm tính năng xử lý lượt nhấp vào bất kỳ điểm đánh dấu nào bằng cách sử dụng bất kỳ tuỳ chọn nào trong phần Tuỳ chọn tuỳ chỉnh điểm đánh dấu ở trên.

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

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Ví dụ về việc cần làm đã lên lịch

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Lọc những điểm đánh dấu hiển thị

Nếu bạn cần sử dụng setVisible, hãy làm theo mẫu này để lọc mọi điểm đánh dấu bằng cách sử dụng bất kỳ tuỳ chọn nào được liệt kê trong phần Các tuỳ chọn tuỳ chỉnh điểm đánh dấu ở trên.

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Ví dụ về việc cần làm đã lên lịch

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Bước tiếp theo

• Tạo kiểu cho bản đồ
• Tuỳ chỉnh đa tuyến