이 페이지는 Cloud Translation API를 통해 번역되었습니다.

배송 조회

예약 작업을 위해 JavaScript Consumer SDK를 설정했으므로 배송을 추적할 준비가 되었다는 의미입니다. 이 문서에서는 다음 주요 단계를 따르세요.

지도 초기화 및 공유된 여정 표시
여정 진행 상황 업데이트 및 확인
여정 공유 중지
오류 처리

지도 설정하기

웹 앱에서 배송 수령 또는 배송을 추적하려면 지도를 로드해야 합니다. 소비자 SDK를 인스턴스화하여 배송 추적을 시작하세요 로드 가능 새 지도를 만들거나 기존 지도를 사용합니다. 그런 다음 초기화 함수를 사용하여 Consumer SDK를 인스턴스화하여 지도 뷰가 추적 중인 항목의 위치에 해당하도록 합니다.

Google Maps JavaScript API를 사용하여 새 지도 로드

새 지도를 만들려면 웹 앱에서 Google Maps JavaScript API를 로드합니다. 이 다음 예는 Google Maps JavaScript API를 로드하고 초기화 확인을 트리거합니다.

callback 매개변수는 API가 로드된 후 initMap 함수를 실행합니다.
defer 속성을 사용하면 브라우저에서 페이지에 표시됩니다.

initMap 함수를 사용하여 소비자 SDK를 인스턴스화합니다. 예를 들면 다음과 같습니다.

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

기존 지도 로드

Google Maps JavaScript API로 만든 기존 지도를 로드할 수도 있습니다. 이미 사용 중인 ID를 예로 들 수 있습니다

예를 들어 표준 google.maps.Map이 있는 웹페이지가 있다고 가정하겠습니다. 엔티티를 반환합니다. 이 끝에 있는 콜백에서 동일한 initMap 함수를 사용하여 지도를 표시합니다.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

배송 위치 제공자 인스턴스화

인증 토큰과 함께 배송 위치 제공업체를 사용합니다. 이전에 정의한 가져오기 도구를 사용하여 Fleet Engine에서 데이터 수신을 시작하세요.

다음 예에서는 위치 제공자를 인스턴스화하는 방법을 보여줍니다.

자바스크립트

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

공유된 여정 표시

지도에 공유 경로를 표시하려면 뷰를 초기화해야 합니다. 뷰는 Fleet Engine에서 정보를 가져온 후 Consumer SDK에서 제공하는 추적된 경로의 위치에 해당하도록 지도 자체의 프레임을 설정합니다.

도움말:

페이지에 지도뷰를 포함하는 <div> 요소가 포함되어 있는지 확인합니다. 다음 예에서 <div> 요소의 이름은 map_canvas입니다.
Fleet Engine이 추적된 항목에 적용하는 기본 공개 상태 규칙을 알고 있어야 합니다. 있습니다. 활성 차량에 대한 공개 상태 규칙도 구성할 수 있습니다. 배송 및 예약 중지 작업이 있습니다. 다음에서 할 일 공개 상태 맞춤설정을 참고하세요. 작업 구성 가이드

다음 예는 지도뷰를 초기화하는 방법을 보여줍니다.

자바스크립트

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-id';

  // Give the map an initial viewport to allow it to
  // initialize; otherwise the 'ready' event above may
  // not fire. The user also has access to the mapView
  // object to customize as they wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-id';

  // Give the map an initial viewport to allow it to
  // initialize; otherwise the 'ready' event above may
  // not fire. The user also has access to the mapView
  // object to customize as they wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

배송 진행률 업데이트

이벤트를 수신 대기하고 여정으로 배송 진행 상황을 업데이트할 수 있습니다. 진행될 수 있습니다 위치 정보 제공자를 사용하여 taskTrackingInfo 객체. 메타 변경사항 정보는 update 이벤트를 트리거합니다. taskTrackingInfo 객체는 다음을 제공합니다.

도착예정시간
남은 정류장 수
수령 또는 배송 전 남은 거리

다음 예는 이러한 변경 이벤트를 수신 대기하는 방법을 보여줍니다.

자바스크립트

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

여러 작업의 기준 표시

예약된 작업용 소비자 SDK는 지도에 추적 ID당 하나의 작업만 표시합니다. 하지만 일반적으로는 하나의 추적 ID를 상품 여정 전반에 걸쳐 제품과 연결된 상태로 유지되는 배송 상품 확인할 수 있습니다 즉, 단일 추적 ID가 여러 개의 동일한 제품에 대해 수령 작업 후 배송 작업처럼 배송 작업에 여러 번 실패한 경우

이 상황을 처리하기 위해 Fleet Engine은 작업 표시 기준을 적용하고 다음 표에 나와 있습니다.

작업 기준	결과
수령 작업 열기
정확히 하나 존재	할 일 표시
여러 개 있음	오류 생성
종료된 수령 작업
정확히 1개가 존재함	할 일 표시
여러 개 존재 (일부에는 결과 시간이 있음)	최근 결과 시간이 있는 작업 표시
여러 개가 존재함(결과 시간이 없는 경우 없음)	오류 생성
배송 작업 열기
정확히 1개가 존재함	할 일 표시
여러 개 있음	오류 생성
게시 종료된 전송 작업
정확히 1개가 존재함	할 일 표시
여러 개 존재 (일부에는 결과 시간이 있음)	최근 결과 시간이 있는 작업 표시
여러 개가 존재함(결과 시간이 없는 경우 없음)	오류 생성

배송 팔로우 중지하기

배송 여정이 완료되거나 취소되면 소비자 앱은 다음을 해야 합니다. 위치 정보 제공자를 삭제할 수 있습니다. 표시됩니다.

추적 ID 삭제

위치 제공업체에서 배송을 추적하지 못하도록 하려면 위치 제공업체에서 추적 ID를 삭제합니다. 다음 예는 그 방법을 보여줍니다.

자바스크립트

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

지도뷰에서 위치 정보 제공자 삭제

다음 예는 지도 뷰에서 위치 제공업체를 삭제하는 방법을 보여줍니다.

자바스크립트

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

배송 추적 오류 처리하기

배송 정보 요청 시 비동기식으로 발생하는 오류는 트리거됩니다. error 이벤트를 수신합니다. 다음 예는 이러한 이벤트를 수신 대기하는 방법을 보여줍니다. 있습니다

자바스크립트

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

참고: 라이브러리 호출을 try...catch 블록으로 래핑해야 합니다. 예기치 않은 오류를 처리합니다

다음 단계

지도 스타일 지정하기