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

Với thư viện theo dõi đội xe 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 các 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. Sau đó, các 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ừ tính năng theo dõi đội xe: Tính năng theo dõi đội xe sẽ 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: xe, điểm dừng hoặc nhiệm vụ. Sau đó, kiểu của đ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 độ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ể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 tính năng xử lý lượt nhấp vào điểm đánh dấu: Để biết ví dụ, hãy xem phần Thêm tính năng xử lý lượt nhấp.

4. Lọc điểm đánh dấu hiển thị: Lọc điểm đánh dấu xuất hiện bằng các tính năng lọc có 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 tải hàng.

Tuỳ chọn tuỳ chỉnh bút đá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 cho 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. 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 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.

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Ví dụ về tác vụ được 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ề tác vụ được 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 tính năng xử lý lượt nhấp vào điểm đánh dấu

Ví dụ sau đây cho biết cách thêm tính năng xử lý lượt 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ề tác vụ được 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 các đ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 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 đượ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) => {
    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ề tác vụ được 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