Tài liệu này trình bày cách tuỳ chỉnh giao diện của các tuyến đường cho xe được theo dõi trên bản đồ. Các tuyến đường được vẽ trên bản đồ dưới dạng đa tuyến. Đối với mỗi cặp tọa độ trong đường dẫn đang hoạt động hoặc còn lại của xe, thư viện sẽ tạo một đối tượng google.maps.Polyline
.
Bạn có thể tạo kiểu cho các đối tượng Polyline
bằng cách chỉ định các tuỳ chỉnh đường đa tuyến mà thư viện sẽ áp dụng trong hai trường hợp:
- Trước khi thêm đố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 tuỳ chỉnh điểm đánh dấu, bạn có thể tạo kiểu cho hình nhiều đường theo tuyến đường theo nhiều cách:
Nhiều đường định tuyến kiểu theo loại: Sử dụng
PolylineOptions
để áp dụng cho tất cả đối tượngPolyline
trùng khớp khi các đối tượng đó được tạo hoặc cập nhật. Để biết ví dụ, hãy xem phần Kiểu đường đa tuyến theo loại.Định kiểu đường đa tuyến của tuyến dựa trên dữ liệu: Chỉ định một hàm tuỳ chỉnh dựa trên dữ liệu từ tính năng theo dõi đội xe hoặc từ các nguồn bên ngoài:
Dữ liệu từ hoạt động theo dõi đội xe: Tính năng theo dõi đội phương tiện truyền dữ liệu nhiều tuyến đến hàm tuỳ chỉnh, bao gồm cả dữ liệu về trạng thái xe hiện tại. Bạn có thể tạo kiểu cho hình nhiều đường dựa trên dữ liệu này, bao gồm cả việc tô màu cho đối tượng
Polyline
thành bóng sâu hơn hoặc làm cho đối tượng đó dày hơn khi xe đang di chuyển chậm hơn.Nguồn bên ngoài: Bạn có thể kết hợp dữ liệu theo dõi đội xe với dữ liệu từ các nguồn bên ngoài Công cụ quản lý đội xe và tạo kiểu cho đối tượng
Polyline
dựa trên thông tin đó.
Để biết ví dụ, hãy xem phần Hình nhiều đường dựa trên dữ liệu.
Kiểm soát chế độ hiển thị của hình nhiều đường: Bạn có thể ẩn hoặc hiện hình nhiều đường bằng thuộc tính
visible
. Để biết thông tin chi tiết, hãy xem phần Kiểm soát chế độ hiển thị hình nhiều đường trong hướng dẫn này.Hiển thị thông tin bổ sung cho một xe hoặc điểm đánh dấu vị trí: Bạn có thể hiển thị thông tin bổ sung bằng cách sử dụng thuộc tính
infowindow
. Để biết thêm thông tin, hãy xem phần Hiển thị thông tin bổ sung cho một xe hoặc điểm đánh dấu vị trí trong hướng dẫn này.
Tuỳ chọn tuỳ chỉnh hình nhiều đường
Các tuỳ chọn tuỳ chỉnh sau đây có trong cả FleetEngineVehicleLocationProviderOptions
và FleetEngineDeliveryVehicleLocationProviderOptions
.
Bạn có thể đặt chế độ tuỳ chỉnh cho nhiều trạng thái đường dẫn trong hành trình của xe:
Lộ trình đã đi: Sử dụng
takenPolylineCustomization
– Tham chiếu Chuyến đi theo yêu cầu, Việc cần làm đã lên lịch.Đường đi đang di chuyển: Sử dụng
activePolylineCustomization
– Chuyến đi theo yêu cầu, tham chiếu Tác vụ theo lịch.Lộ trình chưa đi: Sử dụng
remainingPolylineCustomization
– Tài liệu tham khảo về Chuyến đi theo yêu cầu, Việc cần làm đã lên lịch.
Định kiểu đường đa tuyến của tuyến đường theo loại
Để tạo kiểu cho các đường đa tuyến theo loại, hãy thay đổi kiểu của các đối tượng Polyline
bằng PolylineOptions
.
Ví dụ sau đây cho thấy cách định cấu hình kiểu cho đối tượng Polyline
bằng PolylineOptions
. Hãy làm theo mẫu này để tuỳ chỉnh kiểu của bất kỳ đối tượng Polyline
nào bằng cách sử dụng bất kỳ tuỳ chọn tuỳ chỉnh đường đa tuyến nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh đường đa tuyến trong hướng dẫn này.
Ví dụ về chuyến đi theo yêu cầu hoặc tác vụ theo lịch
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Định kiểu đường đa tuyến của tuyến đường bằng dữ liệu
Để tạo kiểu cho các hình nhiều đường định tuyến bằng dữ liệu, hãy thay đổi kiểu của đối tượng Polyline
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 cho một tuyến đang hoạt động bằng cách sử dụng 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 tượng Polyline
nào bằng cách sử dụng bất kỳ tham số tuỳ chỉnh đường đa tuyến nào được liệt kê trong phần Tuỳ chọn tuỳ chỉnh đường đa tuyến trong hướng dẫn này.
Ví dụ về chuyến đi theo yêu cầu
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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'});
}
}
};
Ví dụ về việc cần làm đã lên lịch
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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'});
}
}
};
Ví dụ về cách tạo kiểu nhận biết tình trạng giao thông (chỉ dành cho chuyến đi theo yêu cầu)
Công cụ xe cộ trả về dữ liệu tốc độ giao thông cho các đường dẫn đang hoạt động và còn lại của xe được theo dõi. Bạn có thể sử dụng thông tin này để tạo kiểu cho các đối tượng Polyline
theo tốc độ lưu lượng truy cập:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Kiểm soát chế độ hiển thị của đa tuyến
Theo mặc định, tất cả đối tượng Polyline
đều hiển thị. Để ẩn một đối tượng Polyline
, hãy đặt thuộc tính visible
của đối tượng đó thành false
.
Ví dụ cho các chuyến đi theo yêu cầu hoặc tác vụ đã lên lịch
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Hiển thị cửa sổ thông tin cho một xe hoặc điểm đánh dấu vị trí
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 cho thấy cách tạo InfoWindow
và đính kèm InfoWindow
đó vào điểm đánh dấu xe.
Ví dụ về chuyến đi theo yêu cầu
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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();
Ví dụ về việc cần làm đã lên lịch
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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();