JavaScript 차량 추적 라이브러리를 사용하면 지도에 추가된 마커의 디자인과 분위기를 맞춤설정할 수 있습니다. 마커 맞춤설정을 지정하면 됩니다. 그러면 Fleet Tracking 라이브러리가 지도에 마커를 추가하기 전에 그리고 모든 마커 업데이트 시에 이 맞춤설정을 적용합니다. 다음과 같은 방법으로 마커의 디자인과 분위기를 맞춤설정할 수 있습니다.
유형에 따라 마커 스타일 지정: 동일한 유형의 마커에 스타일을 지정하는
MarkerOptions객체를 지정합니다. 지정한 변경사항은 각 마커가 생성된 후 적용되어 기본 옵션을 덮어씁니다. 예는 이 가이드의 유형에 따른 스타일 마커를 참고하세요.데이터를 기반으로 마커 스타일 지정: 데이터를 기반으로 맞춤설정 함수를 지정하고 클릭 처리와 같은 상호작용을 마커에 추가합니다. 다음과 같은 차량 추적 또는 외부 소스의 데이터를 기반으로 스타일을 지정할 수 있습니다.
차량 추적의 데이터: 차량 추적은 마커가 나타내는 객체 유형(차량, 정류장, 작업)을 비롯한 데이터를 맞춤설정 함수에 전달합니다. 그러면 마커 요소의 현재 상태에 따라 마커 스타일이 변경됩니다. 예를 들어 남은 정류장 수 또는 작업 유형입니다.
외부 소스: 차량 추적 데이터를 Fleet Engine 외부 소스의 데이터와 결합하고 해당 정보를 기반으로 마커의 스타일을 지정할 수도 있습니다.
예를 보려면 데이터를 기반으로 마커 스타일 지정을 참고하세요.
마커에 클릭 처리 추가: 예는 클릭 처리 추가를 참고하세요.
표시되는 마커 필터링: JavaScript 위치 제공자에서 사용할 수 있는 필터링 기능으로 표시되는 마커를 필터링합니다. 예를 들면 다음과 같습니다.
마커 맞춤설정을 사용하여 예약된 작업 배송 차량 추적: 마커를 맞춤설정하여 차량을 추적할 수 있습니다. 자세한 내용은 마커 맞춤설정을 사용하여 배송 차량 추적하기를 참고하세요.
마커 맞춤설정 옵션
차량 추적 라이브러리는 다음 맞춤설정 매개변수를 제공합니다.
주문형 차량 맞춤설정 매개변수
예약된 작업 맞춤설정 매개변수
유형에 따라 마커 스타일 지정
다음 예에서는 MarkerOptions 객체를 사용하여 차량 마커의 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 마커의 스타일을 맞춤설정합니다.
온디맨드 이동 예
자바스크립트
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
예약된 작업 예
자바스크립트
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
데이터를 기반으로 마커 스타일 지정
다음 예에서는 맞춤설정 함수를 사용하여 차량 마커의 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 위에 나열된 마커 맞춤설정 옵션 중 하나를 사용하여 데이터를 기반으로 마커의 스타일을 맞춤설정합니다.
온디맨드 이동 예
자바스크립트
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
예약된 작업 예
자바스크립트
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
마커에 클릭 처리 추가
다음 예에서는 차량 마커에 클릭 핸들러를 추가하는 방법을 보여줍니다. 이 패턴에 따라 위에 나열된 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 클릭 처리를 마커에 추가합니다.
온디맨드 이동 예
자바스크립트
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
예약된 작업 예
자바스크립트
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
표시되는 마커 필터링
setVisible를 사용해야 하는 경우 이 패턴에 따라 위의 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 마커를 필터링하세요.
온디맨드 이동 예
자바스크립트
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
예약된 작업 예
자바스크립트
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};