Araç takip etme

Bu bölümde, isteğe bağlı geziler veya planlanmış görevler için bir aracı izlemek üzere JavaScript filo izleme kitaplığının nasıl kullanılacağı gösterilmektedir.

Bir aracı takip etmek için aşağıdaki adımları uygulayın:

  1. Kitaplığı yükleme ve harita görünümünü başlatma
  2. Araç konumunu ve harita görünümünü sağlama
  3. Etkinlikleri dinleme ve hataları işleme
  4. İzlemeyi durdurma

Kitaplığı yükleme ve harita görünümünü başlatma

Filo operasyonlarınızı web sayfanızdaki bir haritada göstermek için API anahtarınızı kullanarak harita çağıran bir komut dosyası kullanın. Aşağıdaki örnekte, bu işlemin HTML'den nasıl yapılacağı gösterilmektedir:

  • URL kaynağı: API anahtarınızı kullanarak harita istemek için Google Haritalar API'sini çağırır.

  • callback parametresi: API, çağrıyı döndürdükten sonra initMap işlevini çalıştırır.

  • libraries parametresi: Filo izleme kitaplığını yükler.

  • defer özelliği: API yüklenirken tarayıcının sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Araç konumunu ve harita görünümünü sağlama

Bir aracı izlemeye başlamak için hem bir araç konumu sağlayıcı oluşturmanız hem de aşağıdaki bölümlerde açıklandığı gibi araç kimliğiyle bir harita görünümü başlatmanız gerekir.

Araç konumu sağlayıcı oluşturma

JavaScript filo izleme kitaplığı, Fleet Engine API için bir konum sağlayıcı içerir. Aşağıdaki örneklerde gösterildiği gibi projenizin kimliğini ve belirteç getiricinize bir referans kullanarak bunu örneklendirin.

İsteğe bağlı geziler

JavaScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Planlanmış görevler

JavaScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

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. <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

Bir aracı takip etmeye başladığınızda, ilerlemesini haritada güncellemek ve araç rotası boyunca ilerlerken oluşan hataları gidermek istersiniz.

Araç olaylarını dinleyin

İsteğe bağlı yolculuklar veya planlanmış görevler için bir aracın ilerlemesini izlemek için, değişiklik olaylarını dinlemeniz gerekir.

Konum sağlayıcısını kullanarak vehicle veya deliveryVehicle nesnesinden meta verilerini alırsınız. Meta bilgiler, aracın bir sonraki alım veya bırakma noktasına kadar tahmini varış süresini ve kalan mesafeyi içerir. Meta bilgilerindeki değişiklikler konum sağlayıcısında bir update olayını tetikler.

Aşağıdaki örnek bu değişim olaylarının nasıl dinleneceğini göstermektedir.

İsteğe bağlı geziler

JavaScript

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

TypeScript

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

Planlanmış görevler

JavaScript

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

TypeScript

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

Hataları işleme

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

Aracı takip etmeyi durdurma

Bir aracın takibini durdurmak için aracı konum sağlayıcıdan ve konum sağlayıcıyı harita görünümünden kaldırmanız gerekir. Bu işlemler, aşağıdaki bölümlerde açıklanmıştır. Buradaki örnekler hem isteğe bağlı yolculuklar hem de planlanmış görevler için geçerlidir.

Konum sağlayıcıdan araç kaldırma

Konum sağlayıcının bir aracı izlemesini durdurmak için teslimat aracı kimliğini konum sağlayıcıdan kaldırın.

İsteğe bağlı geziler

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Planlanmış görevler

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

Sırada ne var?