마커 맞춤설정

JavaScript Fleet Tracking 라이브러리를 사용하면 지도에 추가된 마커의 디자인과 분위기를 맞춤설정할 수 있습니다. 이렇게 하려면 Fleet Tracking 라이브러리가 지도에 마커를 추가하기 전에 그리고 모든 마커 업데이트 시에 적용하는 마커 맞춤설정을 지정하면 됩니다. 다음과 같은 방법으로 마커의 디자인과 분위기를 맞춤설정할 수 있습니다.

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

  2. 데이터에 따라 마커 스타일 지정: 데이터에 따라 맞춤설정 함수를 지정하고 클릭 처리와 같은 마커에 상호작용을 추가합니다. Fleet Tracking 또는 외부 소스의 데이터를 기반으로 스타일을 지정할 수 있습니다.

    • Fleet Tracking의 데이터: Fleet Tracking은 마커가 나타내는 객체의 유형(차량, 정류장 또는 작업)을 포함한 데이터를 맞춤설정 함수에 전달합니다. 그러면 마커 요소의 현재 상태에 따라 마커 스타일이 변경됩니다. 예를 들어 남은 정류장 수 또는 작업 유형입니다.

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

    예는 데이터에 따라 마커 스타일 지정을 참고하세요.

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

  4. 표시되는 마커 필터링: JavaScript 위치 제공업체에서 제공하는 필터링 기능을 사용하여 표시되는 마커를 필터링합니다. 예를 들면 다음과 같습니다.

  5. 마커 맞춤설정을 사용하여 예약된 작업 배송 차량 추적: 마커를 맞춤설정하여 차량을 추적할 수 있습니다. 자세한 내용은 마커 맞춤설정을 사용하여 배송 차량 추적을 참고하세요.

마커 맞춤설정 옵션

Fleet Tracking 라이브러리는 다음과 같은 맞춤설정 매개변수를 제공합니다.

온디맨드 이동 맞춤설정 매개변수

예약된 작업 맞춤설정 매개변수

유형에 따라 마커 스타일 지정

다음 예에서는 MarkerOptions 객체를 사용하여 차량 마커의 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 마커의 스타일을 맞춤설정합니다.

온디맨드 이동 예

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

예약된 작업 예

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

데이터에 따라 마커 스타일 지정

다음 예에서는 맞춤설정 함수를 사용하여 차량 마커의 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 위에 나열된 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 데이터를 기반으로 마커의 스타일을 맞춤설정합니다.

온디맨드 이동 예

JavaScript

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

예약된 작업 예

JavaScript

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

마커에 클릭 처리 추가

다음 예에서는 차량 마커에 클릭 처리를 추가하는 방법을 보여줍니다. 이 패턴에 따라 위에 나열된 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 마커에 클릭 처리를 추가합니다.

온디맨드 이동 예

JavaScript

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

예약된 작업 예

JavaScript

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을 사용해야 하는 경우 이 패턴에 따라 위에 나열된 마커 맞춤설정 옵션에 나열된 옵션을 사용하여 마커 를 필터링합니다.

온디맨드 이동 예

JavaScript

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

예약된 작업 예

JavaScript

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

다음 단계