차량 추적

이 섹션에서는 JavaScript 차량 추적 라이브러리를 사용하여 주문형 이동 또는 예약된 작업의 차량을 추적하는 방법을 보여줍니다.

차량을 추적하려면 다음 단계를 따르세요.

라이브러리를 로드하고 지도 뷰를 초기화합니다.
차량 위치 및 지도 뷰를 제공합니다.
이벤트를 수신 대기하고 오류를 처리합니다.
추적을 중지합니다.

라이브러리를 로드하고 지도 뷰를 초기화합니다.

웹페이지의 지도에 차량 운영을 표시하려면 API 키를 사용하여 지도를 호출하는 스크립트를 사용하세요. 다음 예에서는 HTML에서 이 작업을 실행하는 방법을 보여줍니다.

URL 소스: Google Maps API를 호출하여 API 키를 사용하여 지도를 요청합니다.
callback 매개변수: API가 호출을 반환한 후 initMap 함수를 실행합니다.
libraries 매개변수: 차량 추적 라이브러리를 로드합니다.

defer 속성: API가 로드되는 동안 브라우저에서 페이지의 나머지 부분을 계속 렌더링하도록 합니다.

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

차량 위치 및 지도 뷰를 제공합니다.

차량 추적을 시작하려면 다음 섹션에 설명된 대로 차량 위치 제공자를 인스턴스화하고 차량 ID로 지도 뷰를 초기화합니다.

차량 위치 제공자 인스턴스화

JavaScript 차량 추적 라이브러리에는 Fleet Engine API의 위치 제공자가 포함되어 있습니다. 다음 예와 같이 프로젝트 ID와 토큰 가져오기 도구 참조를 사용하여 인스턴스화합니다.

주문형 이동

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

예약된 작업

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

지도 뷰 초기화

JavaScript Journey Sharing 라이브러리를 로드한 후 지도 뷰를 초기화하고 HTML 페이지에 추가합니다. 페이지에는 지도 뷰를 포함하는 <div> 요소가 포함되어야 합니다. 다음 예에서 <div> 요소 의 이름은 map_canvas 입니다.=

주문형 이동

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

예약된 작업

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

이벤트를 수신 대기하고 오류를 처리합니다.

차량 추적을 시작한 후에는 차량이 경로를 따라 이동할 때 지도에서 진행 상황을 업데이트하고 오류를 처리해야 합니다.

차량 이벤트 수신 대기

주문형 이동 또는 예약된 작업의 차량 진행 상황을 추적하려면 변경 이벤트를 수신 대기해야 합니다.

위치 제공자를 사용하여 vehicle 또는 deliveryVehicle 객체에서 메타를 가져옵니다. 메타 정보에는 차량의 다음 픽업 또는 하차 전 예상 도착 시간과 남은 거리가 포함됩니다. 메타 정보가 변경되면 위치 제공자에서 update 이벤트가 트리거됩니다.

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

주문형 이동

JavaScript

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

TypeScript

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

예약된 작업

JavaScript

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

TypeScript

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

오류 처리

주문형 이동

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

예약된 작업

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

차량 추적 중지

차량 추적을 중지하려면 다음 섹션에 설명된 대로 위치 제공자에서 차량을 삭제하고 지도 뷰에서 위치 제공자를 삭제해야 합니다. 여기에 있는 예는 주문형 이동 및 예약된 작업 구현 모두에 적용됩니다.

위치 제공자에서 차량 삭제

위치 제공자가 차량을 추적하지 못하도록 하려면 위치 제공자에서 배송 차량 ID를 삭제합니다.

주문형 이동

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

예약된 작업

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

차량 추적 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

라이브러리를 로드하고 지도 뷰를 초기화합니다.

차량 위치 및 지도 뷰를 제공합니다.

차량 위치 제공자 인스턴스화

주문형 이동

JavaScript

TypeScript

예약된 작업

JavaScript

TypeScript

지도 뷰 초기화

주문형 이동

JavaScript

TypeScript

예약된 작업

JavaScript

TypeScript

이벤트를 수신 대기하고 오류를 처리합니다.

차량 이벤트 수신 대기

주문형 이동

JavaScript

TypeScript

예약된 작업

JavaScript

TypeScript

오류 처리

주문형 이동

JavaScript

TypeScript

예약된 작업

JavaScript

TypeScript

차량 추적 중지

위치 제공자에서 차량 삭제

주문형 이동

JavaScript

TypeScript

예약된 작업

JavaScript

TypeScript

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

JavaScript

TypeScript

다음 단계

차량 추적