차량 추적

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

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

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

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

웹페이지의 지도에 차량 작전을 표시하려면 다음을 사용하세요. API 키를 사용하여 지도를 호출하는 스크립트 다음 예는 HTML에서 다음을 수행합니다.

  • URL 소스: Google 지도 API를 호출하여 API 키를 사용하는 지도를 요청합니다.

  • callback 매개변수: API가 호출을 반환한 후 initMap 함수를 실행합니다.

  • libraries 매개변수: Fleet 추적 라이브러리를 로드합니다.

  • defer 속성: 브라우저에서 페이지에 표시됩니다.

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

차량 위치 및 지도 보기 제공

차량 추적을 시작하려면 차량 위치 정보 제공자를 인스턴스화해야 합니다. 아래 설명된 대로 차량 ID를 사용하여 지도뷰를 초기화합니다. 섹션으로 이동합니다.

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

JavaScript Fleet 추적 라이브러리에 Fleet의 위치 정보 제공자 포함 사용할 수 있습니다. 프로젝트 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 Journey 공유 라이브러리를 로드한 후 초기화 HTML 페이지에 추가합니다. 페이지에는 지도뷰를 포함하는 &lt;div&gt; 요소. &lt;div&gt; 요소 다음 예에서 이름은 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 객체에서 메타를 검색할 수 있습니다. 위치 정보 제공자 메타 정보에는 도착예정시간과 남은 거리가 포함됩니다. 전달 할 수 있습니다. 메타 정보 변경사항 위치 정보 제공자에서 update 이벤트 트리거

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

주문형 경로

자바스크립트

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 Journey 공유 라이브러리를 로드한 후 초기화 HTML 페이지에 추가합니다. 페이지에는 지도뷰를 포함하는 &lt;div&gt; 요소. &lt;div&gt; 요소 다음 예에서 이름은 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);

다음 단계