Filoyu görüntüleme

Bu bölümde, bir filoyu görüntülemek için JavaScript filo izleme kitaplığının nasıl kullanılacağı gösterilmektedir. Bu prosedürlerde, filo izleme kitaplığını ayarladığınız ve bir harita yüklediğiniz varsayılır. Ayrıntılar için JavaScript filo izleme kitaplığını ayarlama başlıklı makaleyi inceleyin.

Bu belgede, bir filoyu görüntülerken yapabileceğiniz aşağıdaki işlemler ele alınmaktadır:

  1. Filoyu izlemeye başlayın.
  2. Etkinlikleri dinleyin ve hataları işleyin.
  3. İzlemeyi durdurun.
  4. Filoyu görüntülerken tek bir aracı izleme

Filoyu izlemeye başlama

Bir filoyu izlemek için filo konumu sağlayıcısını başlatmanız ve aşağıdaki bölümlerde açıklandığı gibi harita görüntü alanı için konum kısıtlamaları ayarlamanız gerekir.

Filo konum sağlayıcı oluşturma

JavaScript filo izleme kitaplığı, Fleet Engine'den birden fazla araç getiren bir konum sağlayıcı içerir.

Örnek oluşturmak için aşağıdaki adımları uygulayın:

  1. Jeton alıcınıza referans vermenin yanı sıra proje kimliğinizi kullanın.

  2. Araç filtresi sorgusu kullanma: Araç filtresi sorgusu, haritada hangi araçların gösterileceğini kontrol eder. Filtre, Fleet Engine'e iletilir.

  3. Araç gösterimi için sınırlama alanını ayarlayın. Haritada araçların gösterileceği alanı sınırlamak için locationRestriction simgesini kullanın. Bu ayar yapılana kadar konum sağlayıcı etkin olmaz. Konum sınırlarını oluşturucuda veya oluşturucudan sonra ayarlayabilirsiniz.

  4. Harita görünümünü başlatın.

Aşağıdaki örneklerde, hem isteğe bağlı hem de planlanmış görev senaryoları için bir filo konumu sağlayıcısının nasıl oluşturulacağı gösterilmektedir. Bu örneklerde, konum sağlayıcıyı etkinleştirmek için oluşturucuda locationRestriction öğesinin nasıl kullanılacağı da gösterilmektedir.

İsteğe bağlı geziler

JavaScript

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

Planlanmış görevler

JavaScript

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 öğesini oluşturucudan sonra ayarlamak için aşağıdaki JavaScript örneğinde gösterildiği gibi locationRestriction öğesini kodunuza daha sonra ekleyin.locationProvider.locationRestriction

   // 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,
   };

Harita görüntü alanını kullanarak konum kısıtlaması ayarlama

Ayrıca, locationRestriction sınırlarını harita görünümünde şu anda görünür olan alanla eşleşecek şekilde ayarlayabilirsiniz.

İsteğe bağlı geziler

JavaScript

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

Planlanmış görevler

JavaScript

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

Harita görünümünü başlatma

Konum sağlayıcıyı oluşturduktan sonra harita görünümünü tek bir aracı takip ederken yaptığınız gibi başlatın.

JavaScript yolculuk paylaşımı kitaplığı yüklendikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda, harita görünümünü içeren bir <div> öğesi bulunmalıdır. <div> öğesi aşağıdaki örneklerde map_canvas olarak adlandırılır.=

İsteğe bağlı geziler

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

Planlanmış görevler

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

Etkinlikleri dinleme ve hataları işleme

Filoyu takip etmeye başladıktan sonra, aşağıdaki bölümlerde açıklandığı gibi etkinlik değişikliklerini dinlemeniz ve ortaya çıkan hataları ele almanız gerekir.

Değişiklik etkinliklerini dinleme

Konum sağlayıcıyı kullanarak filoyla ilgili meta bilgileri araç nesnesinden alabilirsiniz. Meta bilgilerde yapılan değişiklikler güncelleme etkinliğini tetikler. Meta bilgiler arasında gezinme durumu, kalan mesafe ve özel özellikler gibi araç özellikleri yer alır.

Ayrıntılar için aşağıdaki makaleleri inceleyin:

Aşağıdaki örneklerde bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

İsteğe bağlı geziler

JavaScript

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

Planlanmış görevler

JavaScript

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

Hataları dinleme

Ayrıca bir aracı takip ederken oluşan hataları dinleyip ele almak da isteyebilirsiniz. Araç bilgisi isteğinden eşzamansız olarak kaynaklanan hatalar, hata etkinliklerini tetikler.

Aşağıdaki örnekte, hataları işleyebilmeniz için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

JavaScript

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

Filoyu takip etmeyi durdurma

Filoyu izlemeyi durdurmak için konum sağlayıcının sınırlarını null olarak ayarlayın, ardından konum sağlayıcıyı aşağıdaki bölümlerde açıklandığı gibi harita görünümünden kaldırın.

Konum sağlayıcı sınırlarını null olarak ayarlayın.

Konum sağlayıcının filoyu izlemesini durdurmak için konum sağlayıcının sınırlarını null olarak ayarlayın.

İsteğe bağlı geziler

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Planlanmış görevler

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Konum sağlayıcıyı harita görünümünden kaldırma

Aşağıdaki örnekte, konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Teslimat filosu görüntülenirken teslimat aracını takip etme

Planlanmış görevler için Mobility hizmetlerini kullanıyorsanız hem bir filoyu görüntüleyebilir hem de aynı harita görünümünde belirli bir teslimat aracının rotasını ve yaklaşan görevlerini gösterebilirsiniz. Bunu yapmak için hem Delivery Fleet Location Provider hem de Delivery Vehicle Location Provider'ı başlatın ve her ikisini de harita görünümüne ekleyin. Örnek oluşturulduktan sonra teslimat filosu konum sağlayıcısı, haritada teslimat araçlarını göstermeye başlar. Aşağıdaki örneklerde her iki konum sağlayıcının nasıl başlatılacağı gösterilmektedir:

JavaScript

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

Teslimat aracını izlemek için işaretçi özelleştirmeyi kullanma

Filo işaretçisini tıkladığınızda teslimat aracının konum sağlayıcısının teslimat aracını izlemesini etkinleştirmek için aşağıdaki adımları uygulayın:

  1. İşaretçiyi özelleştirme ve tıklama işlemi ekleme

  2. Yinelenen işaretçileri önlemek için işaretçiyi gizleyin.

Bu adımlarla ilgili örnekleri aşağıdaki bölümlerde bulabilirsiniz.

İşaretçiyi özelleştirme ve tıklama işlemi ekleme

JavaScript

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

Yinelenen işaretçileri önlemek için işaretçiyi gizleme

Aynı araç için iki işaretçi oluşturulmasını önlemek amacıyla işaretçiyi teslimat aracı konum sağlayıcısından gizleyin:

JavaScript

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

Sırada ne var?