마커 맞춤설정

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

  1. 유형에 따른 마커 스타일 지정: 동일한 유형의 마커에 스타일을 지정할 MarkerOptions 객체를 지정합니다. 지정한 변경사항은 가 적용되어 모든 기본 옵션을 덮어씁니다. 대상 유형에 따라 마커 스타일 지정에 대한 자세한 내용은 이 가이드를 참고하세요.

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

    • Fleet 추적 데이터: Fleet 추적은 객체의 유형과 마커, 는 차량, 정류장 또는 작업을 나타냅니다. 마커 스타일 지정 후 변경 을 생성합니다. 예를 들어 태스크 유형을 보여줍니다

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

    예제는 데이터를 기반으로 한 스타일 마커를 참조하세요.

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

  4. 표시할 마커 필터링: 표시할 마커를 필터링합니다. 자바스크립트 위치에서 사용할 수 있는 필터링 기능을 사용하면 제공업체 예를 들면 다음과 같습니다.

    를 통해 개인정보처리방침을 정의할 수 있습니다.

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

다음 단계