Araç takip etme

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

Bir aracı izlemek 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şturur hem de aşağıdaki bölümlerde açıklandığı gibi araç kimliğiyle bir harita görünümü başlatırsınız.

Araç konum sağlayıcıyı başlatma

JavaScript filo izleme kitaplığı, Fleet Engine API için bir konum sağlayıcı içerir. Aşağıdaki örneklerde gösterildiği gibi, proje kimliğinizi ve jeton alıcınıza yönelik bir referansı kullanarak örneğini oluşturun.

İ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ığı 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

Bir aracı takip etmeye başladıktan sonra, aracın rotası boyunca ilerlemesini haritada güncellemek ve hataları gidermek istersiniz.

Araç etkinliklerini dinleme

Talep üzerine geziler veya planlanmış görevler için bir aracın ilerleme durumunu izlemek istiyorsanız değişiklik etkinliklerini dinlemeniz gerekir.

Konum sağlayıcıyı kullanarak vehicle veya deliveryVehicle nesnesinden meta verileri alıyorsunuz. Meta bilgiler, aracın bir sonraki teslim alma veya bırakma işlemine kadar olan tahmini varış zamanını ve kalan mesafeyi içerir. Meta bilgilerde yapılan değişiklikler, konum sağlayıcıda güncelleme etkinliğini tetikler.

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

İ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ığı 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);

Aracın takibini 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ı geziler hem de planlanmış görevlerin uygulanması 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?