Tài liệu này trình bày cách tuỳ chỉnh hình nhiều đường cho bản đồ mà bạn sử dụng ứng dụng theo dõi hành trình dựa trên nền tảng web cho người dùng tiêu dùng và nhà điều hành hệ thống thiết bị.
Với SDK người tiêu dùng, bạn có thể kiểm soát chế độ hiển thị hình nhiều đường định tuyến hoặc tạo kiểu cho
hình nhiều đường cho một tuyến đường trên bản đồ. SDK sẽ tạo một
Đối tượng google.maps.Polyline
cho mỗi cặp toạ độ trong hành trình
đường dẫn đang hoạt động hoặc còn lại. Sau đó, thư viện sẽ áp dụng những tuỳ chỉnh này trong
hai tình huống:
- trước khi thêm các đối tượng vào bản đồ
- khi dữ liệu dùng cho các đối tượng đã thay đổi
Tạo kiểu hình nhiều đường
Tương tự như cách tạo kiểu cho điểm đánh dấu, bạn tạo kiểu hình nhiều đường bằng cách sử dụng thông số tuỳ chỉnh. Từ đó, bạn định cấu hình việc tạo kiểu bằng một trong các phương pháp sau:
- Đơn giản nhất: Sử dụng
PolylineOptions
để áp dụng cho tất cả khớp với các đối tượngPolyline
khi chúng được tạo hoặc cập nhật. - Nâng cao: Chỉ định một hàm tuỳ chỉnh.
Các hàm tuỳ chỉnh cho phép tạo kiểu riêng của các đối tượng dựa trên
dữ liệu do Fleet Engine gửi. Hàm có thể thay đổi kiểu của mỗi
đối tượng dựa trên trạng thái hiện tại của hành trình; ví dụ: tô màu
Polyline
đối tượng bóng sâu hơn hoặc làm cho màu đó dày hơn khi xe ở đang di chuyển chậm hơn. Bạn thậm chí có thể tham gia chống lại từ các nguồn bên ngoài Fleet Engine và tạo kiểu cho đối tượngPolyline
dựa trên thông tin đó.
Thông số tuỳ chỉnh
Khi tạo kiểu cho hình nhiều đường tuyến, bạn sẽ dùng các tham số được cung cấp trong
FleetEngineShipmentLocationProviderOptions
. Những thông số này cung cấp cho
các trạng thái đường đi khác nhau trong hành trình của phương tiện, như sau:
- Đường dẫn đã di chuyển: Sử dụng
takenPolylineCustomization
. - Lộ trình Chủ động di chuyển: Sử dụng
activePolylineCustomization
. - Lộ trình Chưa đi được: Sử dụng
remainingPolylineCustomization
.
Sử dụng PolylineOptions
Ví dụ sau đây cho biết cách định cấu hình định kiểu cho một đối tượng Polyline
cùng với PolylineOptions
. Làm theo mẫu này để tuỳ chỉnh kiểu cho
mọi đối tượng Polyline
bằng cách tuỳ chỉnh hình nhiều đường được liệt kê trước đó.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Dùng các hàm tuỳ chỉnh để tạo kiểu cho các hình nhiều đường
Ví dụ sau đây cho thấy cách định cấu hình định kiểu cho một tuyến đang hoạt động
hình nhiều đường. Làm theo mẫu này để tuỳ chỉnh kiểu của mọi đối tượng Polyline
bằng cách sử dụng bất kỳ tham số tuỳ chỉnh hình nhiều đường nào được liệt kê trước đó.
JavaScript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Kiểm soát chế độ hiển thị hình nhiều đường của tuyến đường
Theo mặc định, tất cả đối tượng Polyline
đều hiển thị. Cách tạo đối tượng Polyline
ẩn, đặt thuộc tính visible
của nó:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};