Filoyu görüntüleme

Bu bölümde, JavaScript filo izleme kitaplığının nasıl kullanılacağı gösterilmektedir bir filoyu görüntüleyebilirsiniz. Bu prosedürlerde, araç filosunu oluşturduğunuz ve izleme kitaplığı oluşturdum ve bir harita yükledi. Ayrıntılar için bkz. JavaScript filo izleme kitaplığını ayarlama.

Bu dokümanda, bir projeyi görüntülerken aşağıdaki işlemleri yapabilirsiniz: filo:

1. Arac filosunu izlemeye başlayın.
2. Etkinlikleri dinleyin ve hataları işleyin.
3. İzleme işlemini durdurun.
4. Filoyu görüntülerken tek bir aracı takip etme.

Filoyu takip etmeye başla

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ı örneği göster

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'e iletilir.

   • İsteğe bağlı hizmetler için vehicleFilter kullanın ve ListVehiclesRequest.filter bölümünü inceleyin
   • Planlanmış görevler için deliveryVehicleFilter uygulamasını kullanın ve görevleri inceleyin ListDeliveryVehiclesRequest.filter

3. Sınırları araç ekranı için ayarlayın. Şunlar için locationRestriction kullanın: haritada araçların görüntüleneceği alanı sınırlandırın. Konum Bu ayar ayarlanana kadar sağlayıcı etkin değildir. 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, filo konum sağlayıcısının nasıl örneklendirileceği gösterilmektedir üzerine konuşacağız. 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"',
        });

Yapıcıdan sonra locationRestriction ayarını yapmak için locationProvider.locationRestriction öğesini, aşağıdaki JavaScript örneğinde gösterilmiştir.

Not: Örnek, planlanmış görevler içindir ancak isteğe bağlı gezilerde bunu yapmak için yalnızca 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,
   };

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

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. &lt;div&gt; öğesi aşağıdaki örneklerde 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 izlemeniz gerekir ve ortaya çıkan hataları aşağıdaki bölümlerde açıklandığı şekilde ele almanız gerekir.

Değişim etkinliklerini izleyin

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 gibi araç özelliklerini içerir. durum, kalan mesafe ve özel özellikler.

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

• İsteğe bağlı geziler için 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ı bekleyin

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 şu sesi nasıl dinleyeceğiniz gösterilmektedir: bu etkinlikleri gözden geçirmeniz gerekir.

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 durdur

Filoyu izlemeyi durdurmak için konum sağlayıcısının sınırlarını null, ve ardından, bu bölümde bulabilirsiniz.

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

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.

İstek üzerine 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ı izleme

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 Konumu hem de Teslimat Aracı Konum Sağlayıcısı ve her ikisini de haritaya ekleyerek görünüm. Örneklendirildikten sonra, teslimat filosu konum sağlayıcı teslimat araçlarını haritada görebilirsiniz. Aşağıdaki örneklerde, örneklendirmenin nasıl yapılacağı her iki konum sağlayıcısı:

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

Bir 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ı izlemesini sağlamak için aşağıdaki adımları uygulayın:

1. Bir işaretçiyi özelleştirin ve bir 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. Bir araçla ilgili ayrıntıları göstermek istiyorsanız Kullanıcı aracı tıkladığında teslimat aracının bulunduğu konumu gösterirsiniz. sağlayıcıyı seçin ve araç kimliğini kullanıcının tıkladığı kimlik olarak ayarlayın aşağıdaki örnekte görebilirsiniz. Ancak bunu yaptığınızda teslimat aracı Konum sağlayıcı ayrıca bu araç için bir işaretçi oluşturur (çünkü yapın). 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();
      });
    }
  };

İşaretçilerin yinelenmesini önlemek için işaretçiyi gizleyin

Oluşturmayı önlemek için işaretçiyi teslimat aracının konum sağlayıcısından gizleyin aynı araç için iki işaretçi vardır:

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