마커 맞춤설정하기

플랫폼 선택: Android iOS JavaScript

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

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

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

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

    • 외부 소스: 이동 공유 데이터를 Fleet Engine 외부 소스의 데이터와 결합하고 해당 정보를 기반으로 마커의 스타일을 지정할 수도 있습니다.

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

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

마커 맞춤설정 옵션

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

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

다음 단계