Araç takip etme

Bu bölümde, JavaScript filo izleme kitaplığının isteğe bağlı yolculuklar veya planlanmış görevler için araç izlemek üzere 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. 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örüntülemek için API anahtarınızı kullanarak 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 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 etmesine olanak tanır.

    <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ıyı örneklendirme

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

Programlanan 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ü içeren bir <div> öğesi bulunmalıdır. Aşağıdaki örneklerde <div> öğesi map_canvas olarak adlandırılmıştır.=

İsteğe bağlı yolculuklar

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

Programlanan 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 ilerleme durumunu haritada güncellemek ve araç rotasında ilerlerken hataları ele almak istersiniz.

Araç etkinliklerini dinleme

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

Konum sağlayıcıyı kullanarak vehicle veya deliveryVehicle nesnesinden meta verileri alırsınız. Meta bilgiler, aracın bir sonraki yolcu alma veya bırakma işleminden önceki TVS'yi ve kalan mesafeyi içerir. Meta bilgilerinde 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ı yolculuklar

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

Programlanan 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. Aşağıdaki örneklerde <div> öğesi map_canvas olarak adlandırılmıştır.

İsteğe bağlı yolculuklar

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

Programlanan 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ı izlemeyi durdurma

Bir aracı takip etmeyi durdurmak için aracı konum sağlayıcıdan kaldırmanız 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 talep üzerine 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ı takip etmesini durdurmak için teslimat aracı kimliğini konum sağlayıcıdan kaldırın.

İsteğe bağlı yolculuklar

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Programlanan 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?