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

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 Thay đổi kiểu đánh dấu bằng cách sử dụng MarkerOptions 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 để tạo kiểu cho điểm đánh dấ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 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 tham chiếu hoặc điểm đến. 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ố lượng điểm đánh dấu còn lại cho đến khi xe hoàn thành 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 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 Thay đổi kiểu của điểm đánh dấu bằ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: Để xem ví dụ, hãy xem phần Thêm tính năng xử lý lượt nhấp.

Các lựa chọn tuỳ chỉnh điểm đánh dấu

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Thay đổi kiểu đánh dấu bằng cách sử dụng MarkerOptions

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ỳ chế độ tuỳ chỉnh điểm đánh dấu nào được liệt kê trong phần Các lựa chọn tuỳ chỉnh điểm đánh dấu.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

Ví dụ sau đây minh hoạ 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 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 Các lựa 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 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 bất kỳ tham số tuỳ chỉnh nào của điểm đánh dấu được liệt kê trong phần Các lựa 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 nhiều đường trên tuyến đường