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

배송 조회

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

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

지도 설정하기

웹 앱에서 배송 수령 또는 배송을 추적하려면 지도를 로드해야 합니다. 소비자 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로 만든 기존 지도를 로드할 수도 있습니다. 이미 사용 중인 것을 예로 들 수 있습니다

예를 들어 표준 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
  });

공유된 여정 표시

지도에 공유된 여정을 표시하려면 - 지도의 위치에 대응하도록 지도 자체의 프레임을 설정합니다. 소비자 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개가 존재함	할 일 표시
여러 개 있음	오류 생성
종료된 전송 작업
정확히 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 블록으로 래핑해야 합니다. 예기치 않은 오류를 처리합니다

다음 단계

지도 스타일 지정