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
   Lưu ý: Mặc dù bạn cũng có thể lọc chế độ hiển thị điểm đánh dấu bằng các hàm tuỳ chỉnh, nhưng điều này có thể ảnh hưởng đến hiệu suất. Nếu bạn phải làm việc này, hãy gọi setVisible(false) trên điểm đánh dấu. Để biết ví dụ, hãy xem phần Lọc các điểm đánh dấu hiển thị.

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Ví dụ về tác vụ đã lên lịch

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

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

JavaScript

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

TypeScript

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

Ví dụ về tác vụ đã lên lịch

JavaScript

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

TypeScript

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 Tuỳ chọn tuỳ chỉnh điểm đánh dấu nêu trên.

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

JavaScript

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

TypeScript

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

Ví dụ về tác vụ đã lên lịch

JavaScript

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

TypeScript

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ị

Thận trọng: Nếu bạn lọc chế độ hiển thị điểm đánh dấu bằng setVisible, thì điều này có thể ảnh hưởng đến hiệu suất. Cách tốt nhất là bạn nên lọc những đ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.

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 Tuỳ chọn tuỳ chỉnh điểm đánh dấu ở trên.

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

JavaScript

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

TypeScript

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

Ví dụ về tác vụ đã lên lịch

JavaScript

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

TypeScript

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