Bu sayfa, Cloud Translation API ile çevrilmiştir.

Gönderimi takip etme

Planlanmış görevler için JavaScript Consumer SDK'sını ayarladığınıza göre artık tüketici uygulamanızla gönderileri takip edebilirsiniz. Bu belgede, bu süreçteki aşağıdaki temel adımlar ele alınmaktadır:

Haritayı başlatma ve paylaşılan yolculuğu görüntüleme
Güncelleme ve yolculuk ilerlemesini takip etme
Gönderi takibini durdurma
Kargo takibi hatalarını giderme

Harita oluşturma

Web uygulamanızda bir kargo alımını veya teslimatını takip etmek için bir harita yüklemeniz ve kargonuzu izlemeye başlamak üzere Consumer SDK'yı başlatmanız gerekir. Yeni bir harita yükleyebilir veya mevcut bir haritayı kullanabilirsiniz. Ardından, harita görünümünün izlenen öğenin konumuna karşılık gelmesi için başlatma işlevini kullanarak Consumer SDK'yı oluşturursunuz.

Google Maps JavaScript API'yi kullanarak yeni bir harita yükleme

Yeni bir harita oluşturmak için web uygulamanıza Google Maps JavaScript API'yi yükleyin. Aşağıdaki örnekte, Google Maps JavaScript API'nin nasıl yükleneceği, SDK'nın nasıl etkinleştirileceği ve başlatma kontrolünün nasıl tetikleneceği gösterilmektedir.

callback parametresi, API yüklendikten sonra initMap işlevini çalıştırır.
defer özelliği, API yüklenirken tarayıcının sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

Consumer SDK'yı başlatmak için initMap işlevini kullanın. Örneğin:

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

Mevcut bir haritayı yükleme

Google Maps JavaScript API ile oluşturulmuş mevcut bir haritayı da (ör. halihazırda kullandığınız bir harita) yükleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda tanımlandığı şekilde bir işaretçinin gösterildiği standart bir google.maps.Map öğesi içeren bir web sayfanız olduğunu varsayalım. Bu, geri çağırmanın sonundaki aynı initMap işlevini kullanarak haritanızı gösterir:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

Bir kargo konumu sağlayıcısı oluşturma

Filo Motoru'ndan veri almaya başlamak için daha önce tanımladığınız yetkilendirme jetonu getiriciyle birlikte kargo konumu sağlayıcıyı kullanın.

Bu örneklerde konum sağlayıcının nasıl başlatılacağı gösterilmektedir.

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

Paylaşılan yolculuğu görüntüleme

Planlanmış bir görevin ilerleme durumunu göstermek için görünümünü başlatın. Bu işlem, haritanın çerçevesini izlenen yolculuğun konumuna karşılık gelecek şekilde ayarlar. Ardından, Fleet Engine'den bilgileri alan Tüketici SDK'sı ilerleme durumunu sağlar.

İpuçları:

Sayfanızda harita görünümünü içeren bir <div> öğesi bulunduğundan emin olun. Aşağıdaki örnekte, <div> öğesine map_canvas adı verilmiştir.
Fleet Engine'in izlenen yolculuklara uyguladığı varsayılan görünürlük kurallarını göz önünde bulundurun. Ayrıca, etkin araç sevkiyatı ve planlanmış durak görevleri için görünürlük kurallarını da yapılandırabilirsiniz. Görevleri yapılandırma kılavuzundaki Görev görünürlüğünü özelleştirme bölümüne bakın.

Bu örneklerde, harita görünümünün nasıl başlatılacağı gösterilmektedir.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

Kargo ilerleme durumunu güncelleme

Etkinlikleri dinleyebilir ve yolculuk ilerledikçe kargo ilerleme durumunu güncelleyebilirsiniz. taskTrackingInfo nesnesinden meta bilgilerini almak için konum sağlayıcıyı kullanın. Meta bilgilerde yapılan değişiklikler güncelleme etkinliğini tetikler. taskTrackingInfo nesnesi aşağıdakileri sağlar:

TVS
Kalan durak sayısı
Teslim alma veya teslimata kadar kalan mesafe

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

JavaScript

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

TypeScript

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

Birden fazla görev için görüntüleme ölçütleri

Planlanmış görevler için Consumer SDK, haritada izleme kimliği başına yalnızca bir görev gösterir. Ancak genellikle belirli bir kargo ürününe de bir izleme kimliği atarsınız. Bu kimlik, ürünün sisteminizdeki yolculuğu boyunca ürünle ilişkilendirilmeye devam eder. Bu, tek bir izleme kimliğinin birden fazla görevle ilişkilendirilebileceği anlamına gelir. Örneğin, aynı paket için teslimat görevini takip eden bir teslim alma görevi veya bir paket için birden fazla başarısız gönderim görevi.

Fleet Engine, bu durumu ele almak için aşağıdaki tabloda gösterilen görevleri görüntüleme ölçütlerini uygular.

Görev ölçütleri	Sonuç
Açık teslim alma görevleri
Tam olarak bir tane var	Görevi gösterme
Birden fazla var	Oluşturma hatası
Kapatılan teslim alma görevleri
Tam olarak bir tane var	Görevi gösterme
Birden fazla var (bazılarında sonuç zamanları var)	En son sonuç zamanına sahip görevi göster
Birden fazla var (hiçbirinde sonuç zamanı yok)	Oluşturma hatası
Yayınlama görevlerini açma
Tam olarak bir tane var	Görevi gösterme
Birden fazla var	Oluşturma hatası
Kapatılan teslimat görevleri
Tam olarak bir tane var	Görevi gösterme
Birden fazla var (bazılarında sonuç zamanları var)	En son sonuç zamanına sahip görevi göster
Birden fazla var (hiçbirinde sonuç zamanı yok)	Oluşturma hatası

Gönderi takibini durdurma

Bir kargo yolculuğu tamamlandığında veya iptal edildiğinde, tüketici uygulamanız, izleme kimliğini ve konum sağlayıcıyı harita görünümünden kaldırarak kargoyu takip etmeyi durdurmalıdır. Ayrıntılar için aşağıdaki bölümlere bakın.

İzleme kimliğini kaldırma

Konum sağlayıcının kargoyu izlemesini durdurmak için konum sağlayıcıdan takip kimliğini kaldırın. Aşağıdaki örneklerde bu işlemin nasıl yapılacağı gösterilmektedir.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

Kargo takibi hatalarını giderme

Kargo bilgisi isteğinden eşzamansız olarak kaynaklanan hatalar error etkinliklerini tetikler. Aşağıdaki örnekte, hataları işlemek için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Not: Beklenmedik hataları işlemek için kitaplık çağrılarını try...catch bloklarına sardığınızdan emin olun.

Sırada ne var?

Harita stilini belirleme

Gönderimi takip etme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Harita oluşturma

Google Maps JavaScript API'yi kullanarak yeni bir harita yükleme

Mevcut bir haritayı yükleme

Bir kargo konumu sağlayıcısı oluşturma

JavaScript

TypeScript

Paylaşılan yolculuğu görüntüleme

JavaScript

TypeScript

Kargo ilerleme durumunu güncelleme

JavaScript

TypeScript

Birden fazla görev için görüntüleme ölçütleri

Gönderi takibini durdurma

İzleme kimliğini kaldırma

JavaScript

TypeScript

Konum sağlayıcıyı harita görünümünden kaldırma

JavaScript

TypeScript

Kargo takibi hatalarını giderme

JavaScript

TypeScript

Sırada ne var?

Gönderimi takip etme