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 takip 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 dinleme ve hataları işleme
3. İzlemeyi durdur.
4. Filoyu görüntülerken tek bir aracı takip etme

Filoyu izlemeye başlama

Bir filoyu takip etmek için filo konum sağlayıcısını örneklendirmeniz ve harita görüntü alanının konum kısıtlamalarını aşağıdaki bölümlerde açıklandığı şekilde ayarlamanız gerekir.

Filo konum sağlayıcısını örneklendirme

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

Örneklendirmek için aşağıdaki adımları uygulayın:

1. Proje kimliğinizi ve jeton getirme işlevinize referans 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.

   • Seç-izle hizmetleri için vehicleFilter kullanın ve ListVehiclesRequest.filter sayfasını inceleyin.
   • Planlanmış görevler için deliveryVehicleFilter komutunu kullanın ve ListDeliveryVehiclesRequest.filter sayfasını inceleyin.

3. Araç ekranı için sınırlayıcı alanı ayarlayın. Haritada araçların gösterileceği alanı sınırlamak için locationRestriction özelliğini 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 filo konum sağlayıcısının nasıl örneklendirileceği gösterilmektedir. Bu örneklerde, konum sağlayıcıyı etkinleştirmek için yapıcıda locationRestriction özelliğinin 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"',
        });

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

Oluşturucudan sonra locationRestriction değerini ayarlamak için aşağıdaki JavaScript örneğinde gösterildiği gibi kodunuza daha sonra locationProvider.locationRestriction ekleyin.

Not: Bu örnek, planlanmış görevler içindir. Ancak bunu isteğe bağlı geziler için yapmak istiyorsanız bunun yerine google.maps.journeySharing.FleetEngineFleetLocationProvider kullanmanız gerekir.

   // 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üleme alanını kullanarak konum kısıtlaması ayarlama

Ayrıca, locationRestriction sınırlarını harita görünümünde o anda görünen 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;
    }
  });

Programlanan 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ığını yükledikten 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. Aşağıdaki örneklerde <div> öğesi map_canvas olarak adlandırılmıştı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);

Programlanan 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 etkinlik değişikliklerini dinlemeniz ve ortaya çıkan hataları aşağıdaki bölümlerde açıklandığı şekilde işlemeniz gerekir.

Değişiklik etkinliklerini dinleme

Konum sağlayıcıyı kullanarak araç nesnesinden filoyla ilgili meta bilgileri alabilirsiniz. Meta bilgilerinde yapılan değişiklikler bir update etkinliğini tetikler. Meta bilgiler; navigasyon durumu, kalan mesafe ve özel özellikler gibi araç özelliklerini içerir.

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

• Talep üzerine geziler için araç seçenekleri referansı
• Planlanmış görevler için araç seçenekleri referansı

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

Programlanan 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ı dinlemek ve işlemek de istersiniz. Araç bilgilerinin istenmesiyle eşzamansız olarak ortaya çıkan hatalar, hata etkinliklerini tetikler.

Aşağıdaki örnekte, hataları işleyebilmek için bu etkinlikleri nasıl dinleyeceğiniz 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 izlemeyi durdurma

Filoyu izlemeyi durdurmak için konum sağlayıcının sınırlarını null olarak ayarlayın ve 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 ayarlama

Konum sağlayıcının filoyu takip etmesini 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;

Programlanan 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, bir 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 filosunu görüntülerken teslimat aracını takip etme

Planlanmış görevler için Mobilite hizmetlerini kullanıyorsanız aynı harita görünümünde hem filoyu hem de belirli bir teslimat aracının rotasını ve yaklaşan görevlerini görüntüleyebilirsiniz. Bunun için hem Teslimat Filosu Konum Sağlayıcısı hem de Teslimat Aracı Konum Sağlayıcısı'nı örneklendirin ve her ikisini de harita görünümüne ekleyin. Örneklendirildikten sonra teslimat filosu konum sağlayıcısı, teslimat araçlarını haritada göstermeye başlar. Aşağıdaki örneklerde, her iki konum sağlayıcının nasıl örneklendirileceği 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ı takip etmek için işaretçi özelleştirmeyi kullanma

Teslimat aracı konum sağlayıcısının, filo işaretçisini tıkladığınızda teslimat aracını takip etmesini sağlamak için aşağıdaki adımları uygulayın:

1. İşaretçiyi özelleştirin ve tıklama işlemi ekleyin.

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

   Not: Teslimat filosu konum sağlayıcısı, takip edilen her araç için bir tane olmak üzere bir dizi işaretçi oluşturur. Kullanıcı bir aracı tıkladığında o araçla ilgili ayrıntıları göstermek istiyorsanız teslimat aracı konum sağlayıcısını örneklendirir ve araç kimliğini kullanıcının tıkladığı araç olarak ayarlarsınız. Bu işlem aşağıdaki örnekte gösterilmiştir. Ancak bunu yaptığınızda teslimat aracı konum sağlayıcısı da bu araç için bir işaretçi oluşturur (tasarlandığı şekilde). Bu nedenle, aynı araç için iki işaretçi olmaması amacıyla bunlardan birini gizlersiniz.

Bu adımlarla ilgili örnekler aşağıdaki bölümlerde verilmiştir.

İş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 gizleyin.

Aynı araç için iki işaretçi oluşturulmasını önlemek amacıyla teslimat aracı konum sağlayıcısının işaretçisini 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?

• Haritaya stil uygulama