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:
Đ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ằngMarkerOptions
trong của chúng tôi.Đ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 đưa 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.
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.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
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 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ỳ 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.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
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.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};