Tài liệu này trình bày cách tuỳ chỉnh điểm đánh dấu vị trí và xe trong bản đồ mà bạn sử dụng cho ứng dụng theo dõi lô hàng trên web dành cho người tiêu dùng.
Với SDK Người dùng JavaScript, bạn có thể tuỳ chỉnh giao diện của hai loại điểm đánh dấu được thêm vào bản đồ:
- Điểm đánh dấu xe giao hàng: sử dụng
deliveryVehicleMarkerCustomization - Điểm đánh dấu đích: sử dụng
destinationMarkerCustomization
Bạn có thể thực hiện việc này theo một trong hai cách:
- Đơn giản nhất: Chỉ định đối tượng
MarkerOptionsđể áp dụng cho tất cả các điểm đánh dấu cùng loại. Sau đó, SDK dành cho người dùng sẽ áp dụng kiểu trong hai trường hợp: trước khi thêm điểm đánh dấu vào bản đồ và khi dữ liệu dùng cho điểm đánh dấu đã thay đổi. - Nâng cao hơn: Chỉ định một hàm tuỳ chỉnh. Các hàm tuỳ chỉnh cho phép tạo kiểu cho điểm đánh dấu dựa trên dữ liệu, cũng như thêm tính tương tác vào điểm đánh dấu, chẳng hạn như xử lý lượt nhấp. Cụ thể, SDK tiêu dùng sẽ chuyển dữ liệu đến hàm tuỳ chỉnh về loại đối tượng mà điểm đánh dấu đại diện: xe hoặc đích đến. Sau đó, điều này cho phép thay đổi kiểu điểm đánh dấu dựa trên trạng thái hiện tại của chính phần tử điểm đánh dấu; ví dụ: số lượng điểm dừng còn lại theo kế hoạch cho đến khi đến đích. Bạn thậm chí có thể kết hợp 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 đó.
Ví dụ đơn giản: sử dụng MarkerOptions
Ví dụ sau đây cho thấy cách định cấu hình kiểu của điểm đánh dấu xe bằng đối tượng MarkerOptions. Ví dụ này đặt độ mờ của điểm đánh dấu là 50%.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Ví dụ nâng cao: sử dụng hàm tuỳ chỉnh
Ví dụ sau đây cho thấy cách định cấu hình kiểu của điểm đánh dấu xe để hiển thị số điểm dừng còn lại của xe trước khi đến điểm dừng cho nhiệm vụ đã lên lịch.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
Thêm thao tác nhấp chuột vào điểm đánh dấu
Bạn có thể thêm tính năng xử lý lượt nhấp vào bất kỳ điểm đánh dấu nào, chẳng hạn như trong ví dụ sau đây cho điểm đánh dấu xe.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Hiển thị thông tin bổ sung cho điểm đánh dấu
Bạn có thể dùng InfoWindow để hiện thêm thông tin về xe hoặc điểm đánh dấu vị trí. Ví dụ sau đây sẽ tạo một
InfoWindow và đính kèm mã này vào một điểm đánh dấu xe:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();