Fleet 보기

이 섹션에서는 JavaScript Fleet 추적 라이브러리를 사용하는 방법을 보여줍니다. Fleet를 볼 수 있습니다 이 절차에서는 Fleet를 설정했다고 가정합니다. 지도를 로드했습니다. 자세한 내용은 JavaScript Fleet 추적 라이브러리를 설정합니다.

이 문서에서는 Fleet:

1. Fleet 추적을 시작합니다.
2. 이벤트를 수신 대기하고 오류를 처리합니다.
3. 추적을 중지합니다.
4. 차량 1대를 보면서 차량 1대 추적

Fleet 추적 시작

차량을 추적하려면 차량 위치 제공업체를 인스턴스화해야 하며 다음에 설명된 대로 지도 표시 영역의 위치 제한을 설정합니다. 섹션으로 이동합니다.

Fleet 위치 제공업체 인스턴스화

JavaScript Fleet 추적 라이브러리에는 위치 제공자가 포함되어 있습니다. Fleet Engine에서 여러 차량을 가져옵니다.

이를 인스턴스화하려면 다음 단계를 따르세요.

1. 토큰 가져오기 프로그램에 대한 참조와 프로젝트 ID를 사용합니다.

2. 차량 필터 쿼리 사용 차량 필터 쿼리는 차량 필터 쿼리에서 지도를 표시할 수 있습니다. 필터가 Fleet Engine으로 전달됩니다.

   • 주문형 서비스의 경우 vehicleFilter를 사용하고 ListVehiclesRequest.filter를 검토하세요.
   • 예약된 작업의 경우 deliveryVehicleFilter를 사용하여 다음을 검토합니다. ListDeliveryVehiclesRequest.filter

3. 차량 디스플레이를 위한 경계 설정 locationRestriction 사용 용도 지도에 차량을 표시할 영역을 제한합니다. 위치 provider가 활성 상태가 아닙니다. 위치 경계를 설정하거나 또는 생성자 이후에 전달됩니다.

4. 지도뷰 초기화

다음 예는 차량 위치 정보 제공자를 인스턴스화하는 방법을 보여줍니다. 작업을 모두 수행할 수 있습니다 또한 이 예에서는 위치 정보 제공자를 사용하도록 생성자의 locationRestriction 활성화됨.

주문형 경로

자바스크립트

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

예약된 작업

자바스크립트

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

생성자 뒤에 locationRestriction를 설정하려면 locationProvider.locationRestriction를 코드에 다음 JavaScript 예에 나와 있습니다.

참고: 이 예는 예약된 작업의 경우이지만 주문형 이동의 경우에는 그냥 대신 google.maps.journeySharing.FleetEngineFleetLocationProvider를 사용하세요.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

지도 표시 영역을 사용하여 위치 제한 설정

현재 영역과 일치하도록 locationRestriction 경계를 설정할 수도 있습니다. 표시됩니다.

주문형 경로

자바스크립트

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

예약된 작업

자바스크립트

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

지도뷰 초기화

위치 정보 제공자를 생성한 후에는 동일한 위치에서 지도뷰를 초기화합니다. 한 대의 차량을 따라갈 때 이렇게 하는 것입니다.

JavaScript Journey 공유 라이브러리를 로드한 후 초기화 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);

이벤트 수신 대기 및 오류 처리

Fleet를 추적하기 시작했다면 이벤트 변경사항을 리슨해야 합니다. 다음 섹션에 설명된 대로 발생하는 모든 오류를 처리해야 합니다.

변경 이벤트 수신 대기

다음을 사용하여 차량 객체에서 Fleet에 대한 메타 정보를 검색할 수 있습니다. 위치 정보 제공자 메타 정보를 변경하면 업데이트가 실행됨 이벤트를 처리합니다. 메타 정보에는 내비게이션과 같은 차량 속성이 포함됩니다. 기본 속성입니다.

자세한 내용은 다음을 참고하세요.

• 주문형 경로 차량 옵션 참조
• 예약된 작업 차량 옵션 참조

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

주문형 경로

자바스크립트

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

TypeScript

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

예약된 작업

자바스크립트

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

TypeScript

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

오류 수신 대기

또한 이벤트를 따르는 동안 발생하는 오류를 수신 대기하고 있습니다. 차량 요청 시 비동기식으로 발생하는 오류 정보를 트리거합니다.

다음 예는 다음을 수신 대기하는 방법을 보여줍니다. 이를 통해 오류를 처리할 수 있습니다

자바스크립트

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

Fleet 추적 중지

Fleet 추적을 중지하려면 위치 제공자의 경계를 null로 설정합니다. 그런 다음 참조하세요

위치 제공자 경계를 null로 설정

위치 정보 제공자가 Fleet를 추적하지 못하게 하려면 경계를 설정하세요. null로 변경할 수 있습니다.

주문형 경로

자바스크립트

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

예약된 작업

자바스크립트

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

자바스크립트

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

배송 차량을 보면서 배송 차량 추적하기

예약된 작업에 모바일 서비스를 사용하는 경우 특정 화물 차량의 이동 경로 및 예정된 작업을 표시합니다 표시할 수 있습니다. 이렇게 하려면 배송 Fleet 위치를 둘 다 인스턴스화합니다. 제공업체와 배달 차량 위치 정보 제공자를 모두 사용하여 지도에 추가 합니다. 인스턴스화되고 나면 배송 차량 위치 제공업체가 표시되기 시작합니다. 지도에 배송 차량을 표시합니다. 다음 예는 두 위치 정보 제공자 모두:

자바스크립트

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

마커 맞춤설정을 사용하여 배송 차량 추적

배송 차량 위치 제공자가 배송 차량을 추적할 수 있도록 하기 위해 Fleet 마커를 클릭한 후 다음 단계를 따르세요.

1. 마커를 맞춤설정하고 클릭 동작을 추가합니다.

2. 마커가 중복되지 않도록 하려면 마커를 숨기세요.

   참고: 배송 차량 위치 제공업체는 배송 중인 차량의 위치를 나타내는 추적했습니다. 단일 차량의 세부정보를 표시하려는 경우 사용자가 해당 차량을 클릭하면 배송 차량 위치를 인스턴스화합니다. 제공하고, 다음과 같이 차량 ID를 사용자가 클릭한 ID로 설정합니다. 를 참조하세요. 하지만 이렇게 하면 배송 수단은 또한 위치 제공자는 차량을 위한 마커를 렌더링합니다. 해야 합니다. 따라서 둘 중 하나를 숨겨서 동일한 마커에 차량에 적용됩니다.

다음 섹션에서 이 단계의 예시를 보여줍니다.

마커 맞춤설정 및 클릭 작업 추가

자바스크립트

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

마커가 중복되지 않도록 하려면 마커 숨기기

렌더링을 방지하려면 운송업체 위치 제공업체의 마커를 숨깁니다. 동일한 차량에 대한 마커 2개:

자바스크립트

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

다음 단계

• 지도 스타일 지정