Tùy chỉnh điểm đánh dấu

Tuỳ chỉnh giao diện của các điểm đánh dấu được thêm vào bản đồ. 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 đồ theo hai cách:

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 tạo mỗi điểm đánh dấu, ghi đè mọi tuỳ chọn mặc định. Để biết ví dụ, hãy xem phần Thay đổi kiểu của điểm đánh dấu bằng MarkerOptions 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 để đánh dấu kiểu dựa trên dữ liệu. Bạn có thể tạo kiểu dựa trên dữ liệu từ tính năng chia sẻ hành trình hoặc từ các nguồn bên ngoài:

   • Dữ liệu từ tính năng chia sẻ chuyến đi: Tính năng chia sẻ chuyến đi sẽ truyền dữ liệu điểm đánh dấ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 xuất phát, điểm trung gian hoặc điểm đến. 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 trung gian còn lại cho đến khi xe hoàn tất chuyến đi.

   • Nguồn bên ngoài: Bạn có thể kết hợp dữ liệu chia sẻ chuyến đi với dữ liệu từ các nguồn bên ngoài Công cụ 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 Thay đổi kiểu của điểm đánh dấu bằng cách sử dụng các hàm tuỳ chỉnh trong hướng dẫn này.

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.

Tuỳ chọn tuỳ chỉnh bút đánh dấu

Cả hai tuỳ chọn đều sử dụng các tham số tuỳ chỉnh sau trong API JavaScript của Google Maps trong FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Thay đổi kiểu của điểm đánh dấu bằng MarkerOptions

Ví dụ sau đây cho thấy cách định cấu hình kiểu đ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 tuỳ chỉnh điểm đánh dấu nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh điểm đánh dấu.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Thay đổi kiểu của điểm đánh dấu bằng cách sử dụng các hàm tuỳ chỉnh

Ví dụ sau đây cho biết cách định cấu hình kiểu đ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 bằng cách sử dụng bất kỳ thông số tuỳ chỉnh điểm đánh dấu nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh điểm đánh dấu.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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ỳ tham số tuỳ chỉnh điểm đánh dấu nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh điểm đánh dấu.

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

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

Bước tiếp theo

• Tuỳ chỉnh đường đa tuyến của tuyến đường