마커 맞춤설정하기

플랫폼 선택: Android iOS JavaScript

지도에 추가된 마커의 디자인과 분위기를 맞춤설정합니다. 다음 두 가지 방법으로 지도에 추가된 마커의 디자인과 분위기를 맞춤설정합니다.

1. 유형에 따른 마커 스타일 지정: 동일한 유형의 마커에 스타일을 지정할 MarkerOptions 객체를 지정합니다. 그런 다음 각 마커가 생성된 후에 지정한 변경사항이 적용되어 모든 기본 옵션을 덮어씁니다. 예를 보려면 이 가이드의 MarkerOptions를 사용하여 마커 스타일 변경을 참고하세요.

2. 데이터 기반 마커 스타일 지정: 데이터를 기반으로 마커의 스타일을 지정하는 맞춤설정 함수를 지정합니다. 여정 공유 또는 외부 소스의 데이터를 기반으로 스타일을 지정할 수 있습니다.

   • 경로 공유 데이터: 경로 공유는 마커가 나타내는 객체 유형(차량, 출발지, 경유지 또는 목적지)이 포함된 마커 데이터를 맞춤설정 함수에 전달합니다. 그러면 마커 요소의 현재 상태에 따라 마커 스타일이 변경됩니다. 예를 들어 차량이 이동을 완료할 때까지 남은 경유지 수입니다.

   • 외부 소스: 이동 공유 데이터를 Fleet Engine 외부 소스의 데이터와 결합하고 이 정보에 따라 마커의 스타일을 지정할 수 있습니다.

   예시는 이 가이드의 맞춤설정 함수를 사용하여 마커 스타일 변경을 참고하세요.

3. 마커에 클릭 처리 추가: 예는 클릭 처리 추가를 참고하세요.

마커 맞춤설정 옵션

두 옵션 모두 Google Maps JavaScript API의 FleetEngineTripLocationProviderOptions에서 다음 맞춤설정 매개변수를 사용합니다.

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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.
      });
    }
  };

다음 단계

• 경로 다중선 맞춤설정