이 문서에서는 지도에서 추적된 차량의 경로의 디자인과 분위기를 맞춤설정하는 방법을 설명합니다. 경로는 지도에 폴리라인으로 표시됩니다. 차량의 활성 경로 또는 남은 경로의 각 좌표 쌍에 대해 라이브러리는 google.maps.Polyline 객체를 만듭니다.
다음 두 가지 상황에서 라이브러리가 적용하는 다중선 맞춤설정을 지정하여 Polyline 객체의 스타일을 지정할 수 있습니다.
- 지도에 객체를 추가하기 전에
- 객체에 사용된 데이터가 변경된 경우
다중선 스타일 지정
마커를 맞춤설정하는 방법과 마찬가지로 경로 다중선의 스타일을 다양한 방법으로 지정할 수 있습니다.
유형별 경로 다중선 스타일 지정:
PolylineOptions를 사용하여 일치하는 모든Polyline객체가 생성되거나 업데이트될 때 이를 적용합니다. 예를 보려면 유형별 다중선 스타일 지정을 참고하세요.데이터를 기반으로 경로 다중선 스타일 지정: 차량 추적 또는 외부 소스의 데이터를 기반으로 맞춤설정 함수를 지정합니다.
차량 추적의 데이터: 차량 추적은 현재 차량 상태에 관한 데이터를 포함하여 다중선 데이터를 맞춤설정 함수에 전달합니다. 이 데이터를 기반으로
Polyline객체에 더 어두운 색상을 적용하거나 차량이 더 느리게 움직일 때 더 두껍게 만드는 등 다중선을 스타일링할 수 있습니다.외부 소스: 차량 추적 데이터를 Fleet Engine 외부 소스의 데이터와 결합하고 이 정보를 기반으로
Polyline객체의 스타일을 지정할 수 있습니다.
예를 보려면 데이터를 기반으로 다중선 스타일 지정을 참고하세요.
경로 다중선의 가시성 제어:
visible속성을 사용하여 다중선을 숨기거나 표시할 수 있습니다. 자세한 내용은 이 가이드의 다중선의 표시 설정을 참고하세요.차량 또는 위치 마커에 대한 추가 정보 표시:
infowindow속성을 사용하여 추가 정보를 표시할 수 있습니다. 자세한 내용은 이 가이드의 차량 또는 위치 마커에 대한 추가 정보 표시를 참고하세요.
다중선 맞춤설정 옵션
다음 맞춤설정 옵션은 FleetEngineVehicleLocationProviderOptions 및 FleetEngineDeliveryVehicleLocationProviderOptions에서 모두 사용할 수 있습니다.
차량의 여정에서 다양한 경로 상태에 맞춤설정을 지정할 수 있습니다.
이미 이동한 경로:
takenPolylineCustomization- 주문형 이동, 예약된 작업 참조를 사용합니다.진행 중인 경로:
activePolylineCustomization- 주문형 이동, 예약된 작업 참조를 사용합니다.아직 이동하지 않은 경로:
remainingPolylineCustomization- 주문형 이동, 예약된 작업 참조를 사용합니다.
유형별 경로 다중선 스타일 지정
경로 다중선의 유형별 스타일을 지정하려면 PolylineOptions를 사용하여 Polyline 객체의 스타일을 변경합니다.
다음 예는 PolylineOptions를 사용하여 Polyline 객체의 스타일을 구성하는 방법을 보여줍니다. 이 가이드의 다중선 맞춤설정 옵션에 나열된 경로 다중선 맞춤설정을 사용하여 Polyline 객체의 스타일을 맞춤설정하려면 이 패턴을 따르세요.
주문형 이동 또는 예약된 작업의 예
자바스크립트
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
데이터를 사용하여 경로 다중선 스타일 지정
데이터를 사용하여 경로 다중선의 스타일을 지정하려면 맞춤설정 함수를 사용하여 Polyline 객체의 스타일을 변경합니다.
다음 예는 맞춤설정 함수를 사용하여 활성 경로의 스타일을 구성하는 방법을 보여줍니다. 이 가이드의 다중선 맞춤설정 옵션에 나열된 다중선 맞춤설정 매개변수를 사용하여 Polyline 객체의 스타일을 맞춤설정하려면 이 패턴을 따르세요.
주문형 이동 예시
자바스크립트
// 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'});
}
}
};
예약된 작업 예시
자바스크립트
// 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'});
}
}
};
트래픽 인식 스타일 지정 예시(주문형 이동만 해당)
Fleet Engine은 추적된 차량의 활성 경로 및 남은 경로의 교통 속도 데이터를 반환합니다. 이 정보를 사용하여 트래픽 속도에 따라 Polyline 객체의 스타일을 지정할 수 있습니다.
자바스크립트
// 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'});
}
}
};
다중선의 공개 상태 제어
기본적으로 모든 Polyline 객체가 표시됩니다. Polyline 객체를 보이지 않게 하려면 visible 속성을 false로 설정합니다.
주문형 이동 또는 예약된 작업의 예
자바스크립트
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
차량 또는 위치 마커의 정보 창 표시
InfoWindow를 사용하여 차량 또는 위치 마커에 관한 추가 정보를 표시할 수 있습니다.
다음 예에서는 InfoWindow를 만들고 차량 마커에 연결하는 방법을 보여줍니다.
주문형 이동 예시
자바스크립트
// 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();
예약된 작업 예시
자바스크립트
// 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();