Araç takip etme

Bu bölümde, bir aracı isteğe bağlı geziler veya planlanmış görevler için izlemek amacıyla 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 işlemlerinizi web sayfanızdaki bir haritada görüntülemek için API anahtarınızı kullanarak bir haritayı ç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 isteğinde bulunmak 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ı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ç 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'si 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.

İstek üzerine 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 Yolculuğu 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ü barındıran bir <div> öğesi bulunmalıdır. <div> öğesi, aşağıdaki örneklerde map_canvas olarak adlandırılmıştır.=

İstek üzerine 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, ilerlemesini haritada güncellemek ve araç rotasında ilerlerken hataları ele almak istersiniz.

Araç etkinliklerini dinleme

İsteğe bağlı geziler veya planlanmış görevler için bir aracın ilerleme durumunu takip etmek için, değişiklik etkinliklerini dinlemeniz gerekir.

Konum sağlayıcısını kullanarak vehicle veya deliveryVehicle nesnesinden meta verileri alırsınız. Meta bilgiler, tahmini varış süresini ve aracın bir sonraki teslim alma ya da bırakma işleminden önce kalan mesafeyi içerir. Meta bilgilerde yapılan değişiklikler, konum sağlayıcıda bir güncelleme etkinliğini tetikler.

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

İstek üzerine 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 Yolculuğu 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ü barındıran bir &lt;div&gt; öğesi bulunmalıdır. Aşağıdaki örneklerde <div> öğesi map_canvas olarak adlandırılmıştır.=

İstek üzerine 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ı izlemeyi durdurmak için konum sağlayıcıdan kaldırmanız ve konum sağlayıcıyı aşağıdaki bölümlerde açıklandığı gibi harita görünümünden kaldırmanız gerekir. Buradaki örnekler hem isteğe bağlı geziler hem de planlanmış görevlerin uygulanması 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 konum sağlayıcıdan teslimat aracı kimliğini 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?