지도에 추가된 마커의 디자인과 분위기를 맞춤설정합니다. 다음 두 가지 방법으로 지도에 추가된 마커의 디자인과 분위기를 맞춤설정할 수 있습니다.
유형을 기준으로 마커 스타일 지정:
MarkerOptions객체를 사용하여 동일한 유형의 스타일 마커에 연결할 수 있습니다. 지정하는 변경사항은 각 마커가 생성된 후에 적용되어 모든 기본 옵션을 덮어씁니다. 예를 보려면 다음을 참조하세요.MarkerOptions를 사용하여 마커의 스타일을 변경할 수 있습니다. 참조하세요.데이터 기반 마커 스타일 지정: 데이터를 기반으로 마커의 스타일을 지정하는 맞춤설정 함수를 지정합니다. 여정 공유 또는 외부 소스의 데이터를 기반으로 스타일을 지정할 수 있습니다.
여정 공유 데이터: 여정 공유가 마커 데이터를 맞춤설정 함수(마커가 나타내는 객체의 유형 포함): 자동차, 출발지, 경유지 또는 목적지입니다. 마커 스타일 지정 후 변경 을 생성합니다. 예를 들어 차량이 이동을 완료할 때까지 남은 웨이포인트의 수입니다.
외부 소스: 여정 공유 데이터를 다음과 결합할 수 있습니다. 이를 기반으로 마커의 스타일을 지정하고 확인할 수 있습니다
예를 보려면 다음을 참조하세요. 맞춤설정 함수를 사용하여 마커의 스타일 지정 변경 확인하시기 바랍니다.
마커에 클릭 처리 추가: 예를 들어 클릭 처리 추가를 참고하세요.
마커 맞춤설정 옵션
두 옵션 모두 Google 검색 결과에서 다음과 같은 맞춤설정 매개변수를
Maps 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.
});
}
};