지도에 추가된 마커의 디자인과 분위기를 맞춤설정합니다. 다음 두 가지 방법으로 지도에 추가된 마커의 디자인과 분위기를 맞춤설정할 수 있습니다.
유형에 따른 마커 스타일 지정: 동일한 유형의 마커에 스타일을 지정할
MarkerOptions객체를 지정합니다. 그런 다음 지정된 변경사항이 각 마커가 생성된 후에 적용되어 기본 옵션을 덮어씁니다. 예를 보려면 이 가이드의MarkerOptions를 사용하여 마커 스타일 변경을 참고하세요.데이터 기반 마커 스타일 지정: 데이터를 기반으로 마커의 스타일을 지정하는 맞춤설정 함수를 지정합니다. 여정 공유 또는 외부 소스의 데이터를 기반으로 스타일을 지정할 수 있습니다.
경로 공유의 데이터: 경로 공유는 마커가 나타내는 객체 유형(차량, 출발점, 중간 지점 또는 도착지)을 비롯한 마커 데이터를 맞춤설정 함수에 전달합니다. 그러면 마커 요소의 현재 상태에 따라 마커 스타일이 변경됩니다. 예를 들어 차량이 이동을 완료할 때까지 남은 중간 지점의 수입니다.
외부 소스: 이동 공유 데이터를 Fleet Engine 외부 소스의 데이터와 결합하고 이 정보에 따라 마커의 스타일을 지정할 수 있습니다.
예를 보려면 이 가이드의 맞춤설정 함수를 사용하여 마커 스타일 변경을 참고하세요.
마커에 클릭 처리 추가: 예는 클릭 처리 추가를 참고하세요.
마커 맞춤설정 옵션
두 옵션 모두 Google 지도 JavaScript API의 FleetEngineTripLocationProviderOptions 아래에 있는 다음 맞춤설정 매개변수를 사용합니다.
vehicleMarkerCustomizationoriginMarkerCustomizationwaypointMarkerCustomizationdestinationMarkerCustomization
MarkerOptions를 사용하여 마커 스타일 변경
다음 예에서는 MarkerOptions 객체로 차량 마커 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 마커 맞춤설정 옵션에 나열된 마커 맞춤설정을 사용하여 마커의 스타일을 맞춤설정하세요.
자바스크립트
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
맞춤설정 함수를 사용하여 마커 스타일 변경
다음 예는 맞춤설정 함수를 사용하여 차량 마커 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 마커 맞춤설정 옵션에 나열된 마커 맞춤설정 매개변수를 사용하여 마커의 스타일을 맞춤설정하세요.
자바스크립트
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
마커에 클릭 처리 추가
다음 예는 차량 마커에 클릭 처리를 추가하는 방법을 보여줍니다. 이 패턴에 따라 마커 맞춤설정 옵션에 나열된 마커 맞춤설정 매개변수를 사용하여 마커에 클릭 처리를 추가합니다.
자바스크립트
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};