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 chế độ tuỳ chỉnh cho điểm đánh dấu. Sau đó, thư viện theo dõi đội xe sẽ áp dụng các chế độ tuỳ chỉnh này 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 các điểm đánh dấu theo những cách sau:

1. Đánh dấu kiểu dựa trên loại: Chỉ định một đối tượng MarkerOptions để đánh dấu kiểu của cùng một loại. Sau đó, 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 lựa chọn mặc định. Để xem ví dụ, hãy xem phần Tạo kiểu cho điểm đánh dấu dựa trên loại trong hướng dẫn này.

2. Tạo kiểu cho điểm đánh dấ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 đ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 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 đánh dấu sẽ thay đổi dựa trên trạng thái hiện tại của phần tử đánh dấu. Ví dụ: số điểm dừng còn lại hoặc loại nhiệm 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 Fleet Engine và tạo kiểu cho điểm đánh dấu dựa trên thông tin đó.

   Để xem ví dụ, hãy xem phần Tạo kiểu cho điểm đánh dấ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: Để xem ví dụ, hãy xem phần Thêm tính năng xử lý lượt nhấp.

4. Lọc những điểm đánh dấu xuất hiện: Lọc những điểm đánh dấu xuất hiện bằng các chức 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ị của đ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 thực hiện 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 những điểm đánh dấu có thể nhìn thấy.

5. Sử dụng tính năng tuỳ chỉnh điểm đánh dấu để theo dõi xe giao hàng của một nhiệm vụ đã lên 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 chế độ tuỳ chỉnh điểm đánh dấu để theo dõi xe giao hàng.

Các lựa 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 đây:

Tham số tuỳ chỉnh cho chuyến đi theo yêu cầu

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

Tham số tuỳ chỉnh cho tác vụ định kỳ

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

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

Ví dụ sau đây cho thấy cách định cấu hình kiểu đá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 mọi điểm đánh dấu bằng cách sử dụng bất kỳ lựa chọn nào được liệt kê trong phần Các lựa 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ề nhiệm vụ định kỳ

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Dấu kiểu dựa trên dữ liệu

Ví dụ sau đây cho biết cách định cấu hình kiểu đá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 mọi điểm đánh dấu dựa trên dữ liệu bằng cách sử dụng bất kỳ lựa chọn nào được liệt kê trong phần Các lựa 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ề nhiệm vụ định kỳ

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 minh hoạ cách thêm tính năng xử lý lượt nhấp vào một đ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 một trong các lựa chọn được liệt kê trong phần Các lựa 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) => {
    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ề nhiệm vụ định kỳ

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 những điểm đánh dấu xuất hiện

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 chức 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ỳ lựa chọn nào được liệt kê trong phần Các lựa 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ề nhiệm vụ định kỳ

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 đường nhiều đoạn