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 takibi kitaplığını oluşturduğunuz 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 dokümanda, bir filoyu görüntülerken yapabileceğiniz aşağıdaki işlemler ele alınmaktadır:

1. Arac filosunu izlemeye başlayın.
2. Etkinlikleri dinleyin ve hataları ele alın.
3. İzleme işlemini durdurun.
4. Filo görüntülerken tek bir aracı izleme.

Filoyu takip etmeye başlama

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

Filo konum sağlayıcısı oluşturma

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

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

1. Jeton alıcınıza atıfta bulunmak için proje kimliğinizi kullanın.

2. Araç filtresi sorgusu kullanma Araç filtresi sorgusu, haritanın hangi araçları göstereceğini kontrol eder. Filtre, Fleet Engine'a iletilir.

   • İsteğe bağlı hizmetler için vehicleFilter'ü kullanın ve ListVehiclesRequest.filter'yi inceleyin.
   • Planlanmış görevler için deliveryVehicleFilter simgesini kullanın ve ListDeliveryVehiclesRequest.filter'i 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 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 filo konum sağlayıcısının nasıl oluşturulacağı gösterilmektedir. Bu örneklerde, konum sağlayıcıyı etkinleştirmek için yapıcıda locationRestriction değerinin 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 değerini oluşturucudan sonra ayarlamak için locationProvider.locationRestriction değerini aşağıdaki JavaScript örneğinde gösterildiği gibi kodunuzun sonuna ekleyin.

Not: Örnek, planlanmış görevler içindir ancak bunu isteğe bağlı geziler için yapmak istiyorsanız bunun yerine google.maps.journeySharing.FleetEngineFleetLocationProvider değerini kullanırsınız.

   // 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ı belirleme

locationRestriction sınırlarını, harita görünümünde görünen alanla eşleşecek şekilde de 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 Journey Sharing 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ü barındıran 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);

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

Değişiklik etkinliklerini dinleme

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

Ayrıntılı bilgi için aşağıdakilere bakın:

• İsteğe bağlı seyahatlerde araç seçenekleri referansı
• Planlanmış görevler 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);
    }
  }
});

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 gerçekleşen hataları dinleyip işlemek isteyebilirsiniz. Araç bilgileri istenirken eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler.

Aşağıdaki örnekte, hataları ele alabilmeniz 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 izlemeyi durdurma

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

Konum sağlayıcı sınırlarını null olarak ayarlama

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, 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 görüntüleyebilir hem de belirli bir teslimat aracının rotasını ve yaklaşan görevlerini gösterebilirsiniz. Bunu yapmak için hem bir teslimat filosu konum sağlayıcısı hem de bir teslimat aracı konum sağlayıcısı oluşturun ve her ikisini de harita görünümüne ekleyin. Teslimat filosu konum sağlayıcısı, oluşturulduktan sonra teslimat araçlarını haritada göstermeye başlar. Aşağıdaki örneklerde, her iki konum sağlayıcının da nasıl oluşturulacağı 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ştirmesini kullanma

Teslimat aracı konum sağlayıcısının, filo işaretçisini tıkladığınızda teslimat aracını izlemesini 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 birer işaretçi grubu oluşturur. Kullanıcı bir aracı tıkladığında ilgili aracın ayrıntılarını göstermek istiyorsanız bir teslimat aracı konum sağlayıcısı örneği oluşturur ve araç kimliğini, aşağıdaki örnekte gösterildiği gibi kullanıcının tıkladığı araç olarak ayarlarsınız. Ancak bunu yaptığınızda teslimat aracı konum sağlayıcısı, bu araç için de bir işaretçi oluşturur (böyle tasarlandığı için). Bu nedenle, aynı araç için iki işaretçi olmaması amacıyla bunlardan birini gizleyebilirsiniz.

Bu adımlara ilişkin ö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 yayın 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?

• Haritaya stil uygulama