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