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 đ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 trong các cách sau:

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

2. Điểm đánh dấu kiể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 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 theo dõi hệ thống thiết bị hoặc từ các nguồn bên ngoài:

   • Dữ liệu từ hoạt động theo dõi đội phương tiện vận chuyển: Tính năng Theo dõi đội phương tiện vận chuyển dữ liệu đến bao gồm cả loại đối tượng mà điểm đánh dấu đại diện cho: xe cộ, trạm dừng hoặc nhiệm vụ. Kiểu điểm đánh dấu sau đó 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ện thoại điểm dừng hoặc loại tác vụ còn lại.

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

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

3. Thêm hoạt động xử lý lượt nhấp vào điểm đánh dấu: Để biết ví dụ, hãy xem Thêm 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 với các khả năng lọc có sẵn ở vị trí JavaScript Google Cloud. 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 giao hàng theo lịch: Bạn có thể tuỳ chỉnh điểm đánh dấu để theo dõi phương tiện. Để biết thêm thông tin, hãy xem phần Sử dụ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 nhóm thiết bị cung cấp các thông số tuỳ chỉnh sau đây:

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 công việ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 thiết lập 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 bất kỳ điểm đánh dấu bằng bất kỳ tuỳ chọn nào được nêu trong Các tuỳ chọn tuỳ chỉnh điểm đánh dấu.

Ví dụ về các 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 thiết lập kiểu của điểm đánh dấu xe bằng cách sử dụng các chức năng tuỳ chỉnh. Làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ 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 Các tuỳ chọn tuỳ chỉnh điểm đánh dấu nêu trên.

Ví dụ về các 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. Thực hiện theo mẫu này để thêm xử lý nhấp chuột vào bất kỳ điểm đánh dấu nào bằng cách sử dụng bất kỳ được liệt kê trong các tuỳ chọn tuỳ chỉnh Điểm đánh dấu nêu trên.

Ví dụ về các 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 các điểm đánh dấu có thể hiển thị

Nếu bạn cần sử dụng setVisible, hãy làm theo hình mở khoá sau để 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 các tuỳ chọn tuỳ chỉnh Điểm đánh dấu ở trên.

Ví dụ về các 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);
    }
  };

Các bước tiếp theo

• Tạo kiểu cho bản đồ
• Tuỳ chỉnh hình nhiều đường