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

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

1. Tạo kiểu cho điểm đánh dấu dựa trên loại: Chỉ định một đối tượng MarkerOptions để tạo kiểu cho các điểm đánh dấ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. Để xem 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. 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 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ố điểm tham chiếu 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 được 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: Để biết 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 Google Maps JavaScript API 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ỉ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ác hàm tuỳ chỉnh

Ví dụ sau đây cho thấy 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ỳ 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) => {
    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 thấy cách thêm trình 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 hình nhiều đường của tuyến đường