JavaScript Gönderi İzleme Kitaplığı ile gönderimleri izleme

JavaScript Gönderi İzleme Kitaplığı, Fleet Engine'de izlenen araçların ve önemli yerlerin konumlarını görselleştirmenize olanak tanır. Kitaplık, standart bir google.maps.Map varlığı ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerine kullanılabilen bir JavaScript harita bileşeni içerir. JavaScript Gönderim İzleme Kitaplığı'nı kullanarak, web uygulamanızdan özelleştirilebilir, animasyonlu gönderim takibi deneyimi sunabilirsiniz.

Bileşenler

JavaScript Gönderim İzleme Kitaplığı, bir hedefe doğru ilerlerken araç ve rotanın görselleştirilmesini sağlayan bileşenlerin yanı sıra, sürücünün tahmini varış süresi veya sürüş için kalan mesafe için ham veri feed'leri de sağlar.

Gönderim Takibi harita görünümü

Harita görünümü bileşeni, araçların ve varış noktalarının konumunu görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni tahmin edilen yol boyunca hareket ederken aracı canlandırır.

Gönderim konumu sağlayıcı

Bir gönderim konumu sağlayıcısı, ilk ve son kilometre gönderi takibi için, takip edilen nesnelerin konum bilgilerini gönderim izleme haritasına iletir.

Aşağıdakileri takip etmek için gönderim konumu sağlayıcısını kullanabilirsiniz:

  • Bir gönderinin alınma veya teslimat konumu.
  • Teslimat aracının konumu ve rotası.

İzlenen konum nesneleri

Konum sağlayıcı, araçlar ve hedefler gibi nesnelerin konumunu izler.

Hedef konumu

Varış konumu, yolculuğun bittiği konumdur. Sevkiyat takibi için bu, planlanan görev konumudur.

Araç konumu

Aracın konumu, aracın izlenen konumudur. İsteğe bağlı olarak araç için bir rota içerebilir.

Kimlik doğrulama jetonu alıcısı

Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek için sunucunuzda Fleet Engine için bir JSON Web Token (JWT) madencilik hizmeti uygulamanız gerekir. Ardından, konum verilerine erişim kimliğini doğrulamak için JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanarak web uygulamanızın parçası olarak bir kimlik doğrulama jetonu alıcısı uygulayın.

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, harita üzerinde izlenen konum nesnelerinin görünümünü ve tarzını belirler. Varsayılan stili web uygulamanızın stiline uyacak şekilde değiştirmek için özel stil seçeneklerini kullanabilirsiniz.

Takip edilen konumların görünürlüğünü kontrol edin

Bu bölümde, harita üzerinde izlenen nesneler için görünürlük denetimleri açıklanmaktadır. Bu kurallar iki nesne kategorisi için geçerlidir:

  • Konum işaretçisi
  • Görev verileri

Konum işaretçisinin görünürlüğü

Kalkış ve varış noktaları için tüm konum işaretçileri her zaman haritada gösterilir. Örneğin, teslimatın durumundan bağımsız olarak gönderimin teslimat konumu her zaman harita üzerinde gösterilir.

Görev verilerinin görünürlüğü

Bu bölümde, araç konumu ve kalan rota gibi görev verileri için geçerli olan varsayılan görünürlük kuralları açıklanmaktadır. Birçok görevi özelleştirebilirsiniz, ama hepsini değil:

  • Kullanılamayan görevler -- Bu görevlerin görünürlüğünü özelleştiremezsiniz.
  • Etkin araç görevleri -- Bu tür görevleri özelleştirebilirsiniz.
  • Etkin olmayan araç görevleri -- Bu görevlerin görünürlüğünü özelleştiremezsiniz.

Görevlerin kullanılamaması

Takip edilen göreve giden rotada en az bir kullanılamama görevi varsa (örneğin, sürücü mola veriyor veya araç yakıt kazanıyorsa) araç görünmez. Tahmini varış saati ve tahmini görev tamamlanma süresi hâlâ mevcuttur.

Etkin araç görevleri

TaskTrackingInfo nesnesi, Kargo İzleme Kitaplığı'nda gösterilebilecek çeşitli veri öğeleri sağlar. Varsayılan olarak bu alanlar, görev araca atandığında ve araç görevin 5 durak yakınında olduğunda görünür. Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer. Alanlar aşağıdaki gibidir:

  • Rota çoklu çizgileri
  • Tahmini varış süresi
  • Tahmini görev tamamlanma süresi
  • Görev için kalan sürüş mesafesi
  • Kalan durak sayısı
  • Araç konumu

Fleet Engine'de görev oluştururken veya güncellerken bir görev için TaskTrackingViewConfig özelliğini ayarlayarak görünürlük yapılandırmasını görev bazında özelleştirebilirsiniz. Bu, aşağıdaki ölçütlere (aşağıdaki görünürlük seçeneği olarak atıfta bulunulmuştur) dayalı olabilecek bağımsız veri öğelerinin ne zaman kullanılabilir olacağına dair kurallar oluşturur:

  • Kalan durak sayısı
  • Tahmini varış saatine kadar geçen süre
  • Kalan sürüş mesafesi
  • Her zaman görünür
  • Hiçbir zaman görünür değil

Her veri öğesinin yalnızca bir görünürlük seçeneğiyle ilişkilendirilebileceğini unutmayın. OR veya VE VE kullanılarak ölçütler birleştirilemez.

Aşağıda bir özelleştirme örneği verilmiştir. Bu özelleştirmenin kuralları şunlardır:

  • Araç 3 durak içindeyse rota çoklu çizgilerini gösterin.
  • Kalan sürüş mesafesi 5.000 metreden kısaysa TVS'yi gösterin.
  • Kalan durdurma sayısını hiçbir zaman gösterme.
  • Diğer her alan, araç görevin 5 durak yakınında olduğunda gösterilme varsayılan görünürlüğünü korur.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Projenizin varsayılan görünürlük yapılandırmasını destek ekibiyle iletişime geçerek de özelleştirebilirsiniz.

Rota çoklu çizgileri ve araç konumu görünürlük kuralları:

Rota çoklu çizgileri görünür olduğunda araç konumu da görünür olmalıdır. Aksi takdirde, araç konumu çoklu çizgilerin sonu ile belirtilebilir. Bu, rota çoklu çizgilerinin daha az kısıtlayıcı bir görünürlük seçeneğine sahip olamayacağı anlamına gelir.

Geçerli bir rota çoklu çizgileri / araç konumu görünürlüğü kombinasyonu sağlamak için bu kurallara uyulması gerekir:

  • Rota çoklu çizgileri ve araç konumu aynı görünürlük seçeneği türüne sahip olduğunda:

    • Görünürlük seçeneği kalan durma sayısı, TVS'ye kadar geçen süre veya kalan sürüş mesafesi ise rota çoklu çizgileri, araç konumuna yönelik bu görünürlük seçeneği için ayarlanan değerden küçük veya bu değere eşit bir değer sağlamalıdır. Aşağıda bir örnek verilmiştir:
    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
    • Rota çoklu çizgilerinin her zaman görünür olma seçeneği varsa araç konumu da her zaman görünür bir görünürlük seçeneği sağlamalıdır.
    • Araç konumunun asla görünür olmayan bir görünürlük seçeneği varsa rota çoklu çizgilerinin de asla görünür olmayan bir görünürlük seçeneği sağlaması gerekir.
  • Rota çoklu çizgileri ve araç konumu farklı görünürlük seçeneğine sahip olduğunda, araç konumu yalnızca görünürlük seçeneklerinin her ikisi de karşılandığında görünür olur.

    Aşağıda bir örnek verilmiştir:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingDrivingDistanceMetersThreshold": 3000
      },
    }
    

    Bu örnekte, araç konumu yalnızca kalan durak sayısı en az 3 VE kalan sürüş mesafesi en az 3.000 metreyse gösterilir.

JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmaya başlama

JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmadan önce Fleet Engine hakkında bilgi sahibi olduğunuzdan ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun.

Teslimatı takip etmek için önce takip kimliği hak talebi oluşturun.

İzleme kimliği hak talebi oluştur

Gönderim konumu sağlayıcısını kullanarak bir gönderimi takip etmek için izleme kimliği talebiyle bir JSON Web Token (JWT) oluşturun.

JWT yükünü oluşturmak için trackingid anahtarıyla yetkilendirme bölümüne ek bir hak talebi ekleyin. Parametre değerini gönderim izleme kimliğine ayarlayın.

Aşağıdaki örnekte, izleme kimliğine göre izleme için nasıl jeton oluşturulacağı gösterilmektedir:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Kimlik doğrulama jetonu alıcısı oluşturma

Projeniz için bir hizmet hesabı sertifikası kullanarak sunucularınızda uygun taleplere sahip bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz. Sunucularınızda yalnızca jeton basmanız ve sertifikalarınızı hiçbir zaman hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliğini tehlikeye atarsınız.

Alıcı, Promise içine sarmalanmış iki alanlı bir veri yapısı döndürmelidir:

  • token dizesi.
  • Sayı expiresInSeconds. Bir jetonun süresi, getirildikten sonra bu süre içinde dolar.

JavaScript Gönderim İzleme Kitaplığı, aşağıdakilerden herhangi biri doğru olduğunda kimlik doğrulama jetonu alıcısı aracılığıyla bir jeton ister:

  • Geçerli bir jetonu yoktur (ör. yeni bir sayfa yüklemesinde alıcıyı çağrılmadığında veya alıcı bir jetonla geri dönmediğinde).
  • Daha önce getirdiği jetonun süresi doldu.
  • Daha önce getirilen jetonun geçerlilik süresi dolduktan sonra bir dakika içinde.

Aksi takdirde, kitaplık daha önce yayınlanmış ve halen geçerli olan jetonu kullanır ve alıcıyı çağırmaz.

Aşağıdaki örnekte, kimlik doğrulama jetonu alıcısının nasıl oluşturulacağı gösterilmektedir:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Jetonları basmak için sunucu tarafı uç noktasını uygularken aşağıdakileri göz önünde bulundurun:

  • Uç nokta, jeton için bir geçerlilik süresi döndürmelidir. Yukarıdaki örnekte data.ExpiresInSeconds olarak verilmiştir.
  • Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi süre sonu zamanını (saniye cinsinden) kitaplığa geçirmelidir.
  • SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek uygulama arka ucunun URL'leri aşağıda verilmiştir:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

HTML'den harita yükleme

Aşağıdaki örnekte, JavaScript Gönderim İzleme Kitaplığı'nın belirtilen bir URL'den nasıl yükleneceği gösterilmektedir. callback parametresi, API yüklendikten sonra initMap işlevini yürütür. defer özelliği, tarayıcının API yüklenirken 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>

Bir gönderiyi takip et

Bu bölümde, bir gönderimin teslim alınmasını veya teslimatını takip etmek için JavaScript Gönderim İzleme Kitaplığı'nın nasıl kullanılacağı gösterilmektedir. Kodunuzu çalıştırmadan önce komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yüklediğinizden emin olun.

Bir gönderim konumu sağlayıcıyı gösterme

JavaScript Gönderim İzleme Kitaplığı, Fleet Engine Deliveries API için bir konum sağlayıcısını önceden tanımlar. Jeton fabrikanızı örneklendirmek için proje kimliğinizi ve bir referans kullanın.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

Harita görünümünü başlatma

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

Yarış koşullarını önlemek için harita başlatıldıktan sonra çağrılan geri çağırmadaki konum sağlayıcısının izleme kimliğini ayarlayın.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 will start 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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // 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 will start 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);

İzleme Kimliği

Konum sağlayıcıya sağlanan izleme kimliği, aynı kargo için bir teslim alma ve teslimat görevi ya da birkaç başarısız teslimat girişimi gibi çeşitli görevlere karşılık gelebilir. Sevkiyat takip haritasında gösterilmek üzere bir görev seçilir. Gösterilecek görev şu şekilde belirlenmiştir:

  1. Tam olarak bir tane açık teslim alma görevi varsa bu görev gösterilir. Birden fazla açık teslim alma görevi varsa bir hata oluşur.
  2. Tam olarak bir tane açık teslim görevi varsa bu görev gösterilir. Birden fazla açık teslimat görevi varsa bir hata oluşur.
  3. Kapalı teslim görevleri varsa:
    • Tam olarak bir adet kapalı teslim görevi varsa bu görev gösterilir.
    • Birden fazla kapalı teslimat görevi varsa teslimat zamanı en yeni olan görev gösterilir.
    • Hiçbirisinin sonuç zamanı olmayan birden fazla kapalı teslim görevi varsa bir hata oluşur.
  4. Kapalı teslim alma görevleri varsa:
    • Tam olarak bir tane kapalı teslim alma görevi varsa bu görev gösterilir.
    • Birden fazla kapalı teslim alma görevi varsa en güncel teslim zamanı olan görev gösterilir.
    • Hiçbirisinin sonuç zamanı olmayan birden fazla kapalı teslim alma görevi varsa bir hata oluşur.
  5. Aksi takdirde hiçbir görev gösterilmez.

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak görev izleme bilgi nesnesinden bir görevle ilgili meta bilgileri alabilirsiniz. Bu meta bilgiler arasında TVS, kalan durak sayısı ve araç teslim alınmadan ya da teslimattan önce kalan mesafe yer alır. Meta bilgilerde yapılan değişiklikler bir update etkinliğini tetikler. 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);
});

Hataları işleme

Gönderim bilgileri istenirken eşzamansız olarak oluşan hatalar hata 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: İstenmeyen hataları işlemek için kitaplık çağrılarını try...catch bloklarına sığdırdığınızdan emin olun.

İzlemeyi durdur

Konum sağlayıcının gönderimi izlemesini durdurmak için konum sağlayıcıdan izleme kimliğini kaldırın.

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

Esas haritanın görünümünü ve tarzını özelleştirme

Haritalar bileşeninin görünüm ve tarzını özelleştirmek için bulut tabanlı araçları kullanarak veya seçenekleri doğrudan kod içinde ayarlayarak haritanızı biçimlendirin.

Bulut tabanlı harita stili kullanma

Bulut tabanlı harita stilleri, Google Cloud Console'dan Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmadan harita stilleri oluşturmanıza ve düzenlemenize olanak tanır. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript Gönderim İzleme haritanıza bir stil uygulamak için JourneySharingMapView oluştururken bir mapId belirtin. JourneySharingMapView örneklendikten sonra mapId alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceği gösterilmektedir.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Kod tabanlı harita stili kullanma

Harita stilini özelleştirmenin diğer bir yolu, JourneySharingMapView öğesini oluştururken mapOptions değerini ayarlamaktır.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

İşaretçi özelleştirmelerini kullan

JavaScript Gönderim İzleme Kitaplığı ile, haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçileri haritaya eklemeden önce ve her işaretçi güncellemesinde, Gönderim İzleme Kitaplığı'nın uyguladığı işaretçi özelleştirmeleri belirleyerek yapabilirsiniz.

En basit özelleştirme, aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirtmektir. Nesnede belirtilen değişiklikler, her bir işaretçi oluşturulduktan sonra uygulanır ve varsayılan seçeneklerin üzerine yazılır.

Daha gelişmiş bir seçenek de özelleştirme işlevi belirtmektir. Özelleştirme işlevleri, işaretçilerin verilere dayalı olarak şekillendirilmesinin yanı sıra tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Gönderim İzleme özellikle, işaretçinin temsil ettiği nesne türüyle (araç veya hedef) ilgili verileri özelleştirme işlevine iletir. Bu şekilde işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, hedefe kadar kalan planlanan durak sayısı) göre değişmesine izin verilir. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçinin stilini bu bilgilere göre belirleyebilirsiniz.

Kargo İzleme kitaplığı, FleetEngineShipmentLocationProviderOptions'te aşağıdaki özelleştirme parametrelerini sağlar:

MarkerOptions kullanarak işaretçilerin stilini değiştirin

Aşağıdaki örnekte, bir araç işaretçisinin stilinin bir MarkerOptions nesnesiyle nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirin

Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

İşaretçilere tıklama işleme ekleme

Aşağıdaki örnekte, bir araç işaretçisine tıklama tutma yeri ekleme işlemi gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işlemi eklemek için bu kalıbı uygulayın.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Çoklu çizgi özelleştirmelerini kullanma

Gönderim İzleme Kitaplığı ile gönderim rotasının görünümünü ve tarzını harita üzerinde de özelleştirebilirsiniz. Kitaplık, gönderinin aktif veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Çoklu çizgi özelleştirmeleri belirterek Polyline nesnelerinin stilini belirleyebilirsiniz. Daha sonra kitaplık, bu özelleştirmeleri iki durumda uygular: Nesneleri haritaya eklemeden önce ve nesneler için kullanılan veriler değiştiğinde.

İşaretçi özelleştirmeye benzer şekilde, oluşturulduğunda veya güncellendiğinde eşleşen tüm Polyline nesnelerine uygulanacak bir PolylineOptions grubu belirtebilirsiniz.

Aynı şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin stilini ayrı ayrı düzenlemenizi sağlar. Bu işlev, gönderimin mevcut durumuna göre her bir nesnenin stilini değiştirebilir. Örneğin, Polyline nesnesini daha koyu bir gölgeye boyayabilir veya araç yavaş hareket ederken nesneyi kalınlaştırabilir. Hatta Fleet Engine dışındaki kaynaklarla birleştirme yapabilir ve Polyline nesnesini bu bilgilere göre şekillendirebilirsiniz.

FleetEngineShipmentLocationProviderOptions bölümünde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz. Daha önce seyahat edilmiş, aktif olarak seyahatte veya henüz gidilmemiş araç yolculuğunda farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, PolylineOptions ile bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Özelleştirme işlevlerini kullanarak Polyline nesnelerin stilini değiştirin

Aşağıdaki örnekte, etkin bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Polyline nesnelerin görünürlüğünü kontrol et

Varsayılan olarak Polyline nesnenin tümü görünürdür. Bir Polyline nesnesini görünmez yapmak için visible özelliğini ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Bir araç veya konum işaretçisi için InfoWindow görüntüleyin

Bir araç veya konum işaretçisi hakkında ek bilgi görüntülemek için InfoWindow kullanabilirsiniz.

Aşağıdaki örnekte, InfoWindow öğesi oluşturma ve araç işaretçisine ekleme işlemi gösterilmektedir:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Otomatik sığdırmayı devre dışı bırak

Otomatik sığdırma özelliğini devre dışı bırakarak haritanın, görüntü alanını araca ve öngörülen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Mevcut bir haritayı değiştirme

Bu özelleştirmeleri kaybetmeden, işaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı değiştirmek için JavaScript Gönderim İzleme Kitaplığı'nı kullanabilirsiniz.

Örneğin, üzerinde işaretçi bulunan standart google.maps.Map varlığına sahip bir web sayfanız olduğunu varsayalım:

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * 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>

JavaScript Journey Paylaşım kitaplığını eklemek için:

  1. Kimlik doğrulama jetonu fabrikası için kod ekleyin.
  2. initMap() işlevinde bir konum sağlayıcıyı başlatın.
  3. initMap() işlevinde harita görünümünü başlatın. Görünüm, haritayı içerir.
  4. Özelleştirmenizi, harita görünümünü başlatma için geri çağırma işlevine taşıyın.
  5. Konum kitaplığını API yükleyicisine ekleyin.

Aşağıdaki örnekte, yapılacak değişiklikler gösterilmektedir:

<!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>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Uluru yakınında belirtilen kimliğe sahip takip edilen bir paketiniz varsa artık haritada oluşturulur.