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

JavaScript Gönderim İzleme Kitaplığı, Fleet Engine'de izlenen araçların ve ilgilenilen konumların konumlarını görselleştirmenizi sağlar. Kitaplık, standart bir google.maps.Map varlığının ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerini alan bir JavaScript harita bileşeni içerir. JavaScript Gönderim İzleme Kitaplığı'nı kullanarak, web uygulamanızdan özelleştirilebilir, animasyonlu bir gönderi takibi deneyimi sunabilirsiniz.

Bileşenler

JavaScript Gönderim İzleme Kitaplığı, bir hedefe giden araç ve rotanın görselleştirilmesi için bileşenlerin yanı sıra sürücünün TVS'si veya gidilmesi gereken kalan mesafe için ham veri feed'leri sağlar.

Gönderim İzleme harita görünümü

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

Gönderim konumu sağlayıcı

Bir kargo konumu sağlayıcısı, takip edilen nesnelerin konum bilgilerini ilk ve son kilometre sevkiyatı takibi için kargo takip haritasına gönderir.

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

• Bir gönderinin teslim 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 sona erdiği konumdur. Sevkiyat takibi için, planlanan görev konumudur.

Araç konumu

Araç konumu, bir aracın takip edilen konumudur. İsteğe bağlı olarak araç için bir rota da yer alabilir.

Kimlik doğrulama jetonu alıcısı

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

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, haritadaki 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 et

Bu bölümde, harita üzerinde izlenen nesnelerin 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ış için tüm konum işaretçileri haritada her zaman gösterilir. Örneğin, teslimatın durumundan bağımsız olarak kargo teslimat konumu her zaman haritada 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 özelleştiremezsiniz:

• 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.

Kullanılabilir olmayan görevler

Takip edilen göreve giden rotada en az bir "kullanılamayan" görev varsa (örneğin, sürücünün ara verdiği veya aracın yakıt doldurma işlemi yapılıyorsa) araç görünmez. Tahmini varış süresi ve tahmini görev tamamlanma süresi hala var.

Etkin araç görevleri

TaskTrackingInfo nesnesi, Gönderim İzleme Kitaplığı'nda görünür hale getirilebilecek bir dizi veri öğesi sağlar. Varsayılan olarak bu alanlar, görev araca atandığında ve araç görevden 5 durak uzakta olduğunda görünür. Görünürlük, görev tamamlandığında veya iptal edildiğinde sona erer. Alanlar aşağıdaki gibidir:

• Rota çoklu çizgileri
• Tahmini varış süresi
• Tahmini görev tamamlanma süresi
• Göreve 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 değerini ayarlayarak görünürlük yapılandırmasını göreve göre özelleştirebilirsiniz. Bu işlem, bağımsız veri öğelerinin ne zaman kullanılabilir olacağını belirleyen kurallar oluşturur. Bu kurallar, aşağıdaki ölçütlere (aşağıda görünürlük seçeneği olarak belirtilmiştir) dayalı olabilir:

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

Her bir veri öğesinin yalnızca bir görünürlük seçeneğiyle ilişkilendirilebileceğini unutmayın. VEYA ya da VE kullanarak ölçütleri birleştirmek mümkün değildir.

Aşağıda, bir özelleştirme örneği verilmiştir. Bu özelleştirme 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 aktarma sayısını hiçbir zaman gösterme.
• Diğer her bir alan, araç görevin 5 durağından uzakta olduğunda gösterilen varsayılan görünürlüğü korur.

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Ayrıca destek ekibiyle iletişime geçerek projenizin varsayılan görünürlük yapılandırmasını ö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ünmelidir. Aksi takdirde, araç konumu çoklu çizgilerin sonunda gösterilebilir. 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ğinde kalan durak sayısı, TVS'ye kalan süre veya kalan sürüş mesafesi varsa rota çoklu çizgileri, araç konumu için bu görünürlük seçeneği için ayarlanan değerden düşük veya bu değere eşit bir değer sağlamalıdır. Aşağıda bununla ilgili bir örnek verilmiştir:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingStopCountThreshold": 5
    },
  }
  

  • Rota çoklu çizgileri her zaman görünür bir görünürlük seçeneğine sahipse araç konumu da her zaman görünür bir görünürlük seçeneği sağlamalıdır.
  • Araç konumunun hiçbir zaman görülemeyen bir görünürlük seçeneği varsa, rota çoklu çizgileri de hiçbir zaman görülmeyen bir görünürlük seçeneği de sunmalıdır.

• Rota çoklu çizgileri ve araç konumu farklı görünürlük seçeneği türlerine sahipse, araç konumu yalnızca görünürlük seçeneklerinin her ikisi de sağlandığında görünür.

  Aşağıda bununla ilgili 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örünür.

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

JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmadan önce Fleet Engine'e ve API anahtarı edinmeye aşina olduğunuzdan emin olun.

Bir yayını takip etmek için önce izleme kimliği hak talebi oluşturun.

İzleme kimliği hak talebi oluşturun

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

JWT yükünü oluşturmak için yetkilendirme bölümüne anahtar trackingid parametresini içeren ek bir talep ekleyin. Değerini kargo izleme kimliğine ayarlayın.

Aşağıdaki örnekte, izleme kimliğiyle izleme için jetonun nasıl 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 hak talepleriyle basılmış bir jetonu almak amacıyla kimlik doğrulama jetonu getirme aracı oluşturabilirsiniz. Sunucularınızda yalnızca jetonları bastırmanız ve sertifikalarınızı hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliği tehlikeye girer.

Alıcı, iki alan içeren bir Vaat içinde sarmalanmış bir veri yapısı döndürmelidir:

• token dizesi.
• expiresInSeconds sayısı. Bir jetonun süresi, getirildikten bu süre sonra 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:

• Yeni bir sayfa yüklemesinde alıcıyı çağırmadığı veya alıcının jeton döndürmediği durumlarda geçerli bir jetonu yoktur.
• Daha önce getirdiği jetonun süresi dolmuş.
• Daha önce getirilen jetonun süresinin dolmasından itibaren bir dakika içinde olması.

Aksi takdirde, kitaplık daha önce verilmiş olan geçerli 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:

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

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 bitiş zamanı döndürmelidir; yukarıdaki örnekte data.ExpiresInSeconds olarak verilmiştir.
• Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi geçerlilik süresini (getirilme zamanından itibaren saniye cinsinden) kitaplığa geçirmelidir.
• SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek uygulama arka ucunun URL'leri şunlardır:
  • 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, initMap işlevini API yüklendikten sonra yürütür. 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>

Kargo takip etme

Bu bölümde, bir kargonun teslim alınması veya teslimatının takip edilmesi 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ı örneği gösterme

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

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

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 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. 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ğırmada konum sağlayıcının izleme kimliğini ayarlayın.

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

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 takip kimliği, birden fazla göreve karşılık gelebilir (örneğin, aynı paket için teslim alma ve teslimat görevi veya birkaç başarısız teslimat denemesi). Sevkiyat izleme haritasında gösterilmek üzere bir görev seçildi. Gösterilecek görev şu şekilde belirlenir:

1. Tam olarak bir tane açık teslim alma görevi varsa gösterilir. Birden fazla açık teslim alma görevi varsa hata oluşur.
2. Tam olarak bir tane açık teslim görevi varsa gösterilir. Birden fazla açık teslimat görevi varsa hata oluşur.
3. Kapalı teslim görevleri varsa:
   • Tam olarak bir tane kapalı teslim görevi varsa gösterilir.
   • Birden fazla kapalı teslim görevi varsa en yakın sonuç zamanına sahip olan görev gösterilir.
   • Birden fazla kapalı teslim görevi varsa ve bunların hiçbirinin sonuç zamanı yoksa bir hata oluşturulur.
4. Kapalı teslim alma görevleri varsa:
   • Tam olarak bir tane kapalı teslim alma görevi varsa gösterilir.
   • Birden fazla kapalı teslim alma görevi varsa en yakın sonuç zamanına sahip olan görev gösterilir.
   • Birden fazla kapalı teslim görevi varsa ve bunların hiçbirinin sonuç zamanı yoksa hata oluşturulur.
5. Aksi takdirde herhangi bir görev gösterilmez.

Değişim etkinliklerini dinleme

Konum sağlayıcıyı kullanarak görev izleme bilgi nesnesinden bir görevle ilgili meta bilgileri alabilirsiniz. Meta bilgiler arasında TVS, kalan aktarma sayısı ve teslim alma veya 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.

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

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 isteğinden eşzamansız olarak kaynaklanan hatalar hata etkinliklerini tetikler. Aşağıdaki örnekte, hataların işlenmesi için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

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

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

Not: Beklenmeyen hataları işlemek için kitaplık çağrılarını try...catch bloklarında sarmaladığınızdan emin olun.

İzlemeyi durdur

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

locationProvider.trackingId = '';

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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Temel haritanın görünümünü ve tarzını özelleştirin

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

Bulut tabanlı harita stilleri kullanın

Bulut tabanlı harita stilleri, Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmanıza gerek kalmadan 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 öğesini oluştururken bir mapId belirtin. JourneySharingMapView örneklendikten sonra mapId alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, önceden oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceği gösterilmektedir.

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

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 ayarlamaktır.

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

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 kullanma

JavaScript Gönderim İzleme Kitaplığı ile haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. İşaretçi özelleştirmelerini belirterek bunu yapabilirsiniz. Gönderim İzleme Kitaplığı, işaretçileri haritaya eklemeden önce ve her işaretçi güncellemesinde uygulanır.

En basit özelleştirme işlemi, 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 varsayılan seçeneklerin üzerine yazılarak uygulanır.

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

Gönderim İzleme kitaplığı, FleetEngineShipmentLocationProviderOptions içinde aşağıdaki özelleştirme parametrelerini sağlar:

• deliveryVehicleMarkerCustomization
• destinationMarkerCustomization

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin 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.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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 birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

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

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

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

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

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

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

Çoklu çizgi özelleştirmelerini kullanma

Kargo Takibi Kitaplığı ile kargonun haritadaki rotasının görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, gönderinin etkin veya kalan yolundaki her bir koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Çoklu çizgi özelleştirmelerini belirterek Polyline nesnelerini biçimlendirebilirsiniz. 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.

Benzer şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin ayrı ayrı stillandırılmasına olanak tanır. Bu işlev, gönderimin mevcut durumuna göre her bir nesnenin stilini değiştirebilir. Örneğin, Polyline nesnesini daha derin bir gölgeyle renklendirebilir veya araç yavaş hareket ettiğinde kalınlaştırılabilir. Hatta Fleet Engine dışındaki kaynaklardan da birleştirebilir ve Polyline nesnesinin stilini bu bilgilere göre belirleyebilirsiniz.

FleetEngineShipmentLocationProviderOptions içinde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz. Aracın seyahatinde zaten ilerlemiş, aktif olarak seyahat eden veya henüz seyahat edilmemiş olan farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:

• Daha önce katılmış bir yol için takenPolylineCustomization;
• Aktif olarak seyreden bir yol için activePolylineCustomization;
• remainingPolylineCustomization, henüz seyahat edilmemiş bir yol için.

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, PolylineOptions ile Polyline nesnesi için stilin 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.

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

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

Özelleştirme işlevlerini kullanarak Polyline nesnenin 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 birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

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

// 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 nesnenin görünürlüğünü kontrol edin

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Araç veya konum işaretçisi için bir InfoWindow görüntüleyin

Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntülemek için InfoWindow kullanabilirsiniz.

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

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

// 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ırmayı devre dışı bırakarak haritanın görüntü alanını otomatik olarak araca ve öngörülen rotaya 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ırmayı nasıl devre dışı bırakacağınız gösterilmektedir.

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

// 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

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

Örneğin, işaretçinin gösterildiği standart bir google.maps.Map varlığı içeren 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 Yolculuk 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ı 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ü başlatma işlemi için geri çağırma işlevine taşıyın.
5. API yükleyicisine konum kitaplığını 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 bu paket artık haritada oluşturulur.