마커 맞춤설정

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

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

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

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

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

    예는 데이터 기반 마커 스타일 지정을 참고하세요.

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

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

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

마커 맞춤설정 옵션

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

주문형 이동 맞춤설정 매개변수

예약된 태스크 맞춤설정 매개변수

유형에 따른 마커 스타일

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

주문형 이동 예시

자바스크립트

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

예약된 작업 예시

자바스크립트

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

데이터 기반 마커 스타일 지정

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

주문형 이동 예시

자바스크립트

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

예약된 작업 예시

자바스크립트

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

마커에 클릭 처리 추가

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

주문형 이동 예시

자바스크립트

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

예약된 작업 예시

자바스크립트

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

주문형 이동 예시

자바스크립트

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

예약된 작업 예시

자바스크립트

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

다음 단계