경로 다중선 맞춤설정

이 문서에서는 지도에서 추적된 차량의 경로 디자인과 분위기를 맞춤설정하는 방법을 설명합니다. 경로는 지도에 다중선으로 그려집니다. 라이브러리는 차량의 활성 또는 남은 경로에 있는 각 좌표 쌍에 대해 google.maps.Polyline 객체를 만듭니다. 라이브러리가 다음 두 가지 상황에서 적용하는 폴리라인 맞춤설정을 지정하여 Polyline 객체의 스타일을 지정할 수 있습니다.

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

다중선 스타일 지정

마커를 맞춤설정할 수 있는 것과 마찬가지로 다음과 같은 다양한 방법으로 경로 다중선을 스타일링할 수 있습니다.

  1. 유형별로 경로 폴리라인 스타일 지정: PolylineOptions를 사용하여 일치하는 모든 Polyline 객체가 생성되거나 업데이트될 때 적용합니다. 예를 보려면 유형별로 폴리라인 스타일 지정을 참고하세요.

  2. 데이터를 기반으로 경로 다중선 스타일 지정: 차량 추적 또는 외부 소스의 데이터를 기반으로 맞춤설정 함수를 지정합니다.

    • 차량 추적의 데이터: 차량 추적은 현재 차량 상태에 관한 데이터를 포함하여 폴리라인 데이터를 맞춤설정 함수에 전달합니다. 이 데이터를 기반으로 폴리라인의 스타일을 지정할 수 있습니다. 예를 들어 차량이 더 느리게 이동할 때 Polyline 객체의 색상을 더 어둡게 하거나 더 두껍게 만들 수 있습니다.

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

    예를 보려면 데이터를 기반으로 다중선 스타일 지정을 참고하세요.

  3. 경로 폴리라인의 가시성 제어: visible 속성을 사용하여 폴리라인을 숨기거나 표시할 수 있습니다. 자세한 내용은 이 가이드의 폴리선의 표시 여부 제어를 참고하세요.

  4. 차량 또는 위치 마커에 대한 추가 정보 표시: infowindow 속성을 사용하여 추가 정보를 표시할 수 있습니다. 자세한 내용은 이 가이드의 차량 또는 위치 마커에 대한 추가 정보 표시를 참고하세요.

다중선 맞춤설정 옵션

다음 맞춤설정 옵션은 FleetEngineVehicleLocationProviderOptions 및 FleetEngineDeliveryVehicleLocationProviderOptions에서 모두 사용할 수 있습니다. 차량 이동 중 다양한 경로 상태에 맞게 맞춤설정을 할 수 있습니다.

유형별로 경로 다중선 스타일 지정

유형별로 경로 다중선을 스타일 지정하려면 PolylineOptions을 사용하여 Polyline 객체의 스타일을 변경합니다.

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

주문형 여정 또는 예약된 작업의 예

자바스크립트

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

TypeScript

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

데이터를 사용하여 경로 다중선 스타일 지정

데이터를 사용하여 경로 폴리라인의 스타일을 지정하려면 맞춤설정 함수를 사용하여 Polyline 객체의 스타일을 변경하세요.

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

온디맨드 이동 예

자바스크립트

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

예약된 작업 예

자바스크립트

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

트래픽 인식 스타일 지정 예 (주문형 이동만 해당)

Fleet Engine은 추적된 차량의 활성 경로와 남은 경로에 대한 교통 속도 데이터를 반환합니다. 이 정보를 사용하여 트래픽 속도에 따라 Polyline 객체의 스타일을 지정할 수 있습니다.

자바스크립트

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

폴리선의 공개 상태 제어

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

주문형 여정 또는 예약된 작업의 예

자바스크립트

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

차량 또는 위치 마커의 정보 창 표시

InfoWindow를 사용하여 차량 또는 위치 마커에 관한 추가 정보를 표시할 수 있습니다.

다음 예에서는 InfoWindow를 만들고 차량 마커에 연결하는 방법을 보여줍니다.

온디맨드 이동 예

자바스크립트

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

예약된 작업 예

자바스크립트

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

다음 단계