경로 다중선 맞춤설정

플랫폼 선택: Android iOS JavaScript

이 문서에서는 소비자 사용자를 위한 웹 기반 이동 경로 추적 앱에서 사용하는 지도의 경로 다중선을 맞춤설정하는 방법을 설명합니다.

Consumer SDK를 사용하면 지도에서 이동 경로의 경로 다중선 공개 상태를 제어하거나 경로 다중선의 스타일을 지정할 수 있습니다. SDK는 이동 경로의 활성 또는 남은 경로에 있는 각 좌표 쌍에 대해 google.maps.Polyline 객체를 만듭니다. 그런 다음 라이브러리는 다음 두 가지 상황에서 이러한 맞춤설정을 적용합니다.

  • 객체를 지도에 추가하기 전
  • 객체에 사용된 데이터가 변경된 경우

경로 다중선 스타일 지정

마커의 스타일을 지정하는 것과 마찬가지로 맞춤설정 매개변수 를 사용하여 경로 다중선의 스타일을 지정합니다. 여기에서 다음 방법 중 하나를 사용하여 스타일 지정을 구성합니다.

  • 가장 간단한 방법: 일치하는 모든 Polyline 객체가 생성되거나 업데이트될 때 적용하려면 PolylineOptions를 사용합니다.
  • 고급: 맞춤설정 함수를 지정합니다. 맞춤설정 함수를 사용하면 Fleet Engine에서 전송한 데이터를 기반으로 객체의 개별 스타일을 지정할 수 있습니다. 이 함수는 이동 경로의 현재 상태에 따라 각 객체의 스타일을 변경할 수 있습니다. 예를 들어 차량이 더 느리게 이동할 때 Polyline 객체의 색상을 더 어두운 색조로 지정하거나 더 두껍게 만들 수 있습니다. Fleet Engine 외부의 소스에서 조인하고 해당 정보를 기반으로 Polyline 객체의 스타일을 지정할 수도 있습니다.

맞춤설정 매개변수

경로 다중선의 스타일을 지정할 때는 FleetEngineTripLocationProviderOptions에 제공된 매개변수를 사용합니다. 이러한 매개변수는 다음과 같이 차량 이동 경로의 다양한 경로 상태를 제공합니다.

PolylineOptions 사용

다음 예에서는 Polyline 객체의 스타일을 구성하는 방법을 보여줍니다 PolylineOptions. 이 패턴에 따라 앞에서 나열된 다중선 맞춤설정 중 하나를 사용하여 Polyline 객체의 스타일을 맞춤설정합니다.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

맞춤설정 함수를 사용하여 경로 다중선 스타일 지정

다음 예에서는 활성 경로 다중선의 스타일을 구성하는 방법을 보여줍니다. 이 패턴에 따라 앞에서 나열된 경로 다중선 맞춤설정 매개변수 중 하나를 사용하여 Polyline 객체의 스타일을 맞춤설정합니다.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

경로 다중선 공개 상태 제어

기본적으로 모든 Polyline 객체는 표시됩니다. Polyline 객체를 표시하지 않으려면 visible 속성을 설정합니다.

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};