예약 작업을 위해 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가 제공하는 추적된 여정에 따라 Fleet Engine입니다.
도움말:
페이지에 지도뷰를 포함하는 <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
블록으로 래핑해야 합니다.
예기치 않은 오류를 처리합니다