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 và cảm nhậ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 một MarkerOptions thành các điểm đánh dấu kiểu cùng loại. Những thay đổi bạn chỉ định sau đó được áp dụng sau khi tạo mỗi điểm đánh dấu, ghi đè bất kỳ tùy chọn mặc định nào. Để biết các ví dụ, hãy xem Thay đổi kiểu của điểm đánh dấu bằng MarkerOptions trong của chúng tôi.

2. Điểm đánh dấu kiểu dựa trên dữ liệu: Chỉ định hàm tuỳ chỉnh để điểm đá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ừ hành trình chia sẻ hoặc từ các nguồn bên ngoài:

   • Dữ liệu từ việc chia sẻ hành trình: Tính năng chia sẻ hành trình đã chuyển dữ liệu điểm đánh dấu đến bao gồm loại đối tượng mà điểm đánh dấu đại diện: xe, điểm khởi hành, điểm tham chiếu hoặc điểm đến. 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 tham chiếu còn lại cho đến khi xe kết thúc chuyến đi.

   • Các nguồn bên ngoài: Bạn có thể kết hợp dữ liệu chia sẻ hành trình 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 vào dữ liệu đó thông tin cá nhân.

   Để biết các ví dụ, hãy xem 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 hoạt động xử lý lượt nhấp vào điểm đánh dấu: Ví dụ: hãy xem bài viết Thêm cách xử lý lượt nhấp.

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

Cả hai tuỳ chọn đều sử dụng các thông số tuỳ chỉnh sau trong mã API JavaScript cho 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 thiết lập kiểu đ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ỳ 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 Các tuỳ chọn tuỳ chỉnh điểm đánh dấu.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

Ví dụ sau đây cho thấy cách thiết lập kiểu điểm đánh dấu xe bằng cách sử dụng chức năng tuỳ chỉnh. Làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ 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 Các 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 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ỳ điểm đánh dấu nào các tham số tuỳ chỉnh được liệt kê trong 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.
      });
    }
  };

Các bước tiếp theo

• Tuỳ chỉnh hình nhiều đường