경로 다중선 맞춤설정

이 문서에서는 소비자 사용자와 차량 조작자를 위한 웹 기반 여정 추적 앱입니다.

Consumer SDK를 사용하면 경로 다중선 표시 여부를 제어하거나 route 폴리라인. SDK는 여정의 각 좌표 쌍에 대한 google.maps.Polyline 객체 지정할 수도 있습니다. 그런 다음 라이브러리는 이러한 맞춤설정을 두 가지 상황은 다음과 같습니다.

  • 객체를 지도에 추가하기 전
  • 객체에 사용되는 데이터가 변경될 때

경로 다중선 스타일 지정

마커의 스타일을 지정하는 방법과 유사하게, 경로 안내선의 스타일을 지정하려면 맞춤설정 매개변수가 생성됩니다. 여기에서 다음 중 하나를 사용하여 스타일을 구성합니다. 접근 방식:

  • 가장 간단: PolylineOptions를 사용하여 모든 Polyline 객체가 생성되거나 업데이트될 때 객체와 일치합니다.
  • 고급: 맞춤설정 함수를 지정합니다. 맞춤설정 기능을 사용하면 선택한 객체 유형에 따라 객체의 개별 스타일을 Fleet Engine에서 전송하는 데이터입니다 이 함수는 각 객체를 정의합니다. 예를 들어 Polyline 객체는 더 깊은 명암을 피하거나 차량이 대기 중일 때 더 두껍게 만듭니다. 더 천천히 움직이죠. Fleet Engine 외부의 소스에서도 조인할 수 있습니다. 이 정보를 기반으로 Polyline 객체의 스타일을 지정합니다.

맞춤설정 매개변수

경로 다중선의 스타일을 지정할 때는 FleetEngineShipmentLocationProviderOptions 이러한 매개변수는 다음과 같이 서로 다른 경로 상태를 전달합니다.

PolylineOptions 사용

다음 예는 Polyline 객체의 스타일 지정을 구성하는 방법을 보여줍니다. PolylineOptions 사용 이 패턴을 따라 앞서 나열한 다중선 맞춤설정 중 하나를 사용하여 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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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};