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

Gönderimi takip etme

Artık planlanmış görevler için JavaScript Tüketici SDK'sını ayarladığınıza göre takip etmeye hazır hale getirebilirsiniz. Bu dokümanda, şu süreçteki temel adımları uygulayın:

Bir haritayı başlatma ve paylaşılan yolculuğu gösterme
Yolculuktaki ilerlemeyi güncelleme ve takip etme
Yolculuk paylaşımını durdur
Hataları işleme

Harita oluşturun

Web uygulamanızda bir gönderi teslim alma veya teslimatı takip etmek için harita yüklemeniz gerekir. ve gönderiminizi izlemeye başlamak için Tüketici SDK'sını örneklendirin. Yükleyebilirsiniz yeni bir harita kullanın veya mevcut bir haritayı kullanın. Daha sonra ilk kullanıma Tüketici SDK'sını örneklendirmek için kullanılır. Böylece, harita görünümü konumu.

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

Yeni bir harita oluşturmak için Google Maps JavaScript API'yi web uygulamanıza 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, tarayıcının sayfasına gönderir.

Tüketici SDK'sını örneklendirmek 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ükle

Google Maps JavaScript API tarafından oluşturulmuş mevcut bir haritayı da yükleyebilirsiniz. örneğin halihazırda kullandığınız bir web sitesi gibi.

Örneğin, aşağıdaki HTML kodunda tanımlandığı şekilde bir işaretçi gösterilen standart bir google.maps.Map öğesi olan bir web sayfanız olduğunu varsayalım. Bu haritanızı, sondaki geri çağırmada aynı initMap işlevini kullanarak 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 gönderim konumu sağlayıcı örneği gösterme

Yetkilendirme jetonuyla birlikte gönderim konumu sağlayıcısını kullanın başlamak için "2" değerini çağırın.

Bu örneklerde, konum sağlayıcının nasıl oluşturulacağı 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üleyin

Haritanın paylaşılan yolculuğu göstermesi için, haritasına ilişkin çerçeveyi, ilgili öğenin bulunduğu konuma karşılık gelecek şekilde Google Analytics 4'ten bilgi edindikten sonra Tüketici SDK'sı tarafından Filo Motoru.

İpuçları:

Sayfanızın, harita görünümünü barındıran bir <div> öğesi içerdiğinden emin olun. Aşağıdaki örnekte, <div> öğesi map_canvas olarak adlandırılmıştır.
Fleet Engine'in izlenenler için geçerli olduğu varsayılan görünürlük kurallarına dikkat edin teşekkür ederiz. Etkin araç için görünürlük kuralları da yapılandırabilirsiniz. ve planlanan durdurma görevlerini içerir. Görev görünürlüğünü özelleştirme bölümüne göz atın: Görevleri yapılandırma kılavuzu.

Bu örneklerde, harita görünümünün nasıl ilk kullanıma hazırlanacağı 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);
}

Gönderim ilerleme durumunu güncelle

Etkinlikleri dinleyebilir ve yolculuk ilerledikçe gönderim ilerleme durumunu güncelleyebilirsiniz. Web sitesinden meta bilgileri almak için konum sağlayıcısını taskTrackingInfo nesne algılandı. Meta verilerdeki değişiklikler bilgileri bir güncelleme etkinliğini tetikler. taskTrackingInfo nesnesi, şu:

TVS
Kalan aktarma sayısı
Teslim alma veya teslimat öncesinde 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 ölçütleri görüntüleyin

Planlanmış görevler için Tüketici SDK'sı, şurada her izleme kimliği başına yalnızca bir görev gösteriyor: tıklayın. Ancak genellikle belirli bir izleme kimliği için yolculuğu boyunca iyiyle ilişkili kalan sevkiyat malı inceleyebilirsiniz. Bu, tek bir izleme kimliğinin teslim görevi takip eden bir teslimat görevi gibi, birden fazla başarısız kargo görevi görebilir.

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ç
Teslim alma görevlerini açma
Tam olarak bir tane mevcut	Görevi gösterme
Birden çok öğe mevcut	Hata oluştur
Kapalı teslim alma görevleri
Tam olarak bir tane mevcut	Görevi göster
Birden fazla sonuç var (bazıları sonuç zamanlarıyla birlikte)	En son sonuç zamanına sahip görevi göster
Birden fazla mevcut (sonuç zamanları olan yok)	Hata oluştur
Teslimat görevlerini açma
Tam olarak bir tane mevcut	Görevi gösterme
Birden çok öğe mevcut	Hata oluştur
Kapalı yayın görevleri
Tam olarak bir tane var	Görevi göster
Birden fazla sonuç var (bazıları sonuç zamanlarıyla birlikte)	En son sonuç zamanına sahip görevi göster
Birden fazla mevcut (sonuç zamanları olan yok)	Hata oluştur

Bir gönderiyi takip etmeyi durdurma

Bir kargo yolculuğu tamamlandığında veya iptal edildiğinde tüketici uygulamanız, takip kimliğini ve konum sağlayıcıyı harita görünümünden kaldırarak yolculuk paylaşımını sonlandırmalıdır.

İzleme kimliğini kaldırma

Konum sağlayıcının kargoyu izlemesini durdurmak için izleme kimliğini kaldırın konum sağlayıcıdan çıkarabilirsiniz. Aşağıdaki örneklerde bunu nasıl yapacağınız 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, 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);

Kargo takibi hatalarını giderme

Gönderim bilgileri tetikleyicisinden eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini kontrol edin. Aşağıdaki örnekte bu etkinliklerin nasıl dinleneceği gösterilmektedir en iyi uygulamaları gözden geçireceğiz.

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: Kitaplık çağrılarını try...catch blok şeklinde sarmaladığınızdan emin olun birçok teknik bulunur.

Sırada ne var?

Haritanın stilini ayarlama