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

1. Tạo kiểu cho điểm đánh dấu dựa trên loại: Chỉ định đối tượng MarkerOptions để tạo kiểu cho điểm đánh dấ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 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 hàm tuỳ chỉnh dựa trên dữ liệu, cũng như thêm tính 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 chuyể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 đ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ố đ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 đ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 khả năng 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. Để xem ví dụ, hãy xem phần Lọ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 giao hàng cho 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 phần Sử dụng tính năng 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:

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 nhiệm vụ đã lên lịch

• 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 biết 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 mọi điểm đánh dấu bằng cách sử dụng bất kỳ lựa chọn nào 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ụ đã lên lịch

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

Ví dụ sau đây cho biết 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 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 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ụ đã 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 mọi điểm đánh dấu bằng cách sử dụng bất kỳ lựa chọn nào 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ụ đã 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 điểm đánh dấu hiển thị

Thận trọng: Nếu bạn lọc khả năng hiển thị điểm đánh dấu bằng setVisible, đ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 đ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ỳ lựa chọn nào 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ụ đã 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 đường nhiều đoạn