경로 다중선 맞춤설정

플랫폼 선택: Android iOS JavaScript

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

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

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

경로 다중선 스타일 지정

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

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

맞춤설정 매개변수

경로 폴리라인의 스타일을 지정할 때는 FleetEngineTripLocationProviderOptions에 제공된 매개변수를 사용합니다. 이러한 파라미터는 차량 여정의 다양한 경로 상태를 제공합니다.

• 이미 이동한 경로: takenPolylineCustomization 사용
• 활성 이동 경로: activePolylineCustomization 사용
• 아직 이동하지 않은 경로: remainingPolylineCustomization을 사용합니다.

PolylineOptions 사용

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

자바스크립트

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

TypeScript

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

맞춤설정 함수를 사용하여 경로 폴리라인 스타일 지정

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

자바스크립트

// 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 속성을 설정합니다.

자바스크립트

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};