Araç takip etme

Bu bölümde, isteğe bağlı seyahatler veya planlanmış görevler için bir aracı izlemek üzere JavaScript filo izleme kitaplığının nasıl kullanılacağı 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. Aracın 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örüntülemek 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: Fleet izleme kitaplığını yükler.

  • defer özelliği: API yüklenirken tarayıcının sayfanızı 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ç konum sağlayıcısı 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ç konumu sağlayıcısı 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, proje kimliğinizi ve jeton alıcınızı referans olarak kullanarak jeton alıcısını ö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 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

Bir aracı izlemeye başladıktan sonra, aracın ilerleme durumunu bir haritada güncellemek ve araç rotasında ilerlerken hataları ele almak istersiniz.

Araç etkinliklerini dinleme

İsteğe bağlı seyahatler 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 alırsınız. Meta bilgiler, aracın bir sonraki teslim alma veya bırakma noktasına kadar tahmini varış süresini ve kalan mesafeyi içerir. Meta bilgilerde yapılan değişiklikler, konum sağlayıcıda bir güncelleme etkinliği 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 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);

Bir aracın takibini durdurma

Bir aracın izlenmesini 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çıklanmaktadır. Buradaki örnekler hem isteğe bağlı geziler hem de planlanmış görevler için geçerlidir.

Bir aracı konum sağlayıcıdan kaldırma

Konum sağlayıcının bir aracı izlemesini durdurmak için yayın 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, 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);

Sırada ne var?