이 문서에서는 추적 대상 경로의 디자인과 분위기를 맞춤설정하는 방법을 설명합니다.
지도에 차량을 표시할 수 있습니다. 경로는 지도에서 다중선으로 그려집니다. 각 쌍의
라이브러리가 만드는 차량의 활성 또는 남은 경로의 좌표
google.maps.Polyline 객체
다중선 맞춤설정을 지정하여 Polyline 객체의 스타일을 지정할 수 있습니다.
라이브러리는 두 가지 상황에서 적용됩니다.
- 지도에 객체를 추가하기 전에
- 객체에 사용되는 데이터가 변경된 경우
다중선 스타일 지정
마커를 맞춤설정하는 방법과 유사하게 경로 다중선의 스타일을 지정할 수 있습니다. 있습니다.
유형별로 경로 다중선 스타일 지정:
PolylineOptions일치하는 모든Polyline객체에 적용됩니다. 볼 수 있습니다. 예를 보려면 유형별로 다중선 스타일 지정을 참고하세요.데이터를 기반으로 경로 다중선 스타일 지정: 맞춤설정 함수를 지정합니다. 차량 추적 또는 외부 소스의 데이터 기반:
Fleet 추적 데이터: Fleet 추적은 다중선 데이터를 현재 차량의 데이터를 포함한 맞춤설정 기능 있습니다. 이 데이터를 기반으로 다중선의 스타일을 지정하고
Polyline객체의 음영을 더 깊게 조정하거나, 차량이 더 느리게 움직이고 있습니다.외부 소스: Fleet 추적 데이터를 다음의 데이터와 결합할 수 있습니다. 이를 기반으로
Polyline객체의 스타일을 지정합니다. 확인할 수 있습니다
예를 보려면 데이터를 기반으로 다중선 스타일 지정을 참조하세요.
경로 폴리라인의 표시 여부 제어: 경로 폴리라인의
visible속성을 사용하여 다중선을 표시합니다. 자세한 내용은 이 가이드에서 다중선의 공개 상태를 제어합니다.차량 또는 위치 마커에 대한 추가 정보 표시:
infowindow속성을 사용하여 추가 정보를 표시할 수 있습니다. 대상 자세한 내용은 차량 또는 위치 마커에 대한 추가 정보 표시 이 가이드를 참고하세요.
다중선 맞춤설정 옵션
다음 맞춤설정 옵션은
FleetEngineVehicleLocationProviderOptions 드림
및
FleetEngineDeliveryVehicleLocationProviderOptions
차량의 다양한 경로 상태에 대한 맞춤설정을 설정할 수 있습니다.
여정:
이미 이동한 경로:
takenPolylineCustomization- 사용 주문형 이동, 예약된 작업 참조활성 이동 경로:
activePolylineCustomization- 사용 주문형 이동, 예약된 작업 참조아직 이동하지 않은 경로:
remainingPolylineCustomization- 사용 주문형 이동, 예약된 작업 참조
유형별로 경로 다중선 스타일 지정
유형별로 경로 다중선의 스타일을 지정하려면 Polyline 객체의 스타일을 변경하세요.
(PolylineOptions 사용)
다음 예는 Polyline 객체의 스타일 지정을 구성하는 방법을 보여줍니다.
PolylineOptions 사용 원하는 스타일의 스타일을 맞춤설정하려면 이 패턴을 따르세요.
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();