차량 추적

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

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

  1. 라이브러리 로드 및 지도 뷰 초기화
  2. 차량 위치 및 지도 뷰 제공
  3. 이벤트 수신 대기 및 오류 처리
  4. 추적 중지

라이브러리 로드 및 지도 뷰 초기화

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

  • URL 소스: Google 지도 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와 토큰 가져오기 도구 참조를 사용하여 인스턴스화합니다.

주문형 이동

자바스크립트

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',
});

예약된 작업

자바스크립트

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 여정 공유 라이브러리를 로드한 후 지도 뷰를 초기화하고 HTML 페이지에 추가합니다. 페이지에는 지도 뷰를 포함하는 <div> 요소가 있어야 합니다. 다음 예에서는 <div> 요소의 이름이 map_canvas입니다.=

주문형 이동

자바스크립트

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);

예약된 작업

자바스크립트

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 객체에서 메타를 검색합니다. 메타 정보에는 차량의 다음 승차 또는 하차까지의 예상 도착 시간과 남은 거리가 포함됩니다. 메타 정보가 변경되면 위치 제공업체에서 업데이트 이벤트가 트리거됩니다.

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

주문형 이동

자바스크립트

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);
  }
});

예약된 작업

자바스크립트

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 여정 공유 라이브러리를 로드한 후 지도 뷰를 초기화하고 HTML 페이지에 추가합니다. 페이지에는 지도 뷰를 포함하는 <div> 요소가 있어야 합니다. 다음 예에서는 <div> 요소의 이름이 map_canvas입니다.=

주문형 이동

자바스크립트

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);

예약된 작업

자바스크립트

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를 삭제합니다.

주문형 이동

자바스크립트

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

예약된 작업

자바스크립트

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

지도 뷰에서 위치 제공업체 삭제

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

자바스크립트

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

다음 단계