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

JavaScript Gönderim İzleme Kitaplığı, konumu görselleştirmenizi sağlar oranında araç ve önemli yer bulunuyor. Kitaplık JavaScript harita bileşeni içeriyor standart google.maps.Map varlığı ve veri bileşenlerinin bağlanması için ilk adımıdır. JavaScript Gönderim İzleme Kitaplığı'nı kullanarak web uygulamanızdan özelleştirilebilir, animasyonlu bir kargo takibi deneyimi sunabilirsiniz.

Bileşenler

JavaScript Gönderim İzleme Kitaplığı, görselleştirme için bileşenler sağlar ilerledikçe araç ve rotanın yanı sıra ham verilerin yanı sıra özet akışları, sürücünün TVS veya kalan sürüş mesafesini gösterir.

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 yol boyunca hareket etmesini sağlar.

Gönderim konumu sağlayıcı

Bir kargo konumu sağlayıcısı, izlenen nesneler için konum bilgilerini feed'ler kargo takibi haritasına eklemeliyiz.

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 konum gibi nesnelerin konumunu izler. hedefler.

Hedef konumu

Varış konumu, yolculuğun sona erdiği konumdur. Gönderim için planlanan görev yeri niteliğe sahiptir.

Araç konumu

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

Kimlik doğrulama jetonu alıcısı

Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek için Fleet Engine için bir JSON Web Token (JWT) para kazanma hizmeti uygulama . Ardından, isteğe bağlı olarak bir kimlik doğrulama jetonu alıcı JavaScript Yolculuk Paylaşımı Kitaplığı kullanılarak web uygulamanızın konum verilerine erişim için kimlik doğrulaması yapmak zorundadır.

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, izlenen konum nesnelerini görebilirsiniz. Tekliflerinizi otomatikleştirmek ve optimize etmek için varsayılan stili stile uyacak şekilde değiştirmek için özel stil seçenekleri bir yoludur.

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, kargo teslimat konumu haritada her zaman gösteriliyor. e-posta alırsınız.

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

Bu bölümde, görev verilerine uygulanan varsayılan görünürlük kuralları açıklanmaktadır. (ör. aracın konumu ve kalan rota) Birçok görevi özelleştirebilirsiniz tümü 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.

Kullanılabilir olmayan görevler

En az bir kullanılabilir olmama görevi varsa (örneğin, (Sürücü ara veriyorsa veya araçta benzin alınıyorsa) rota üzerinde takip edilen göreve başlamadan önce Tahmini varış mevcut olduğunu öğrenmeniz gerekecek.

Etkin araç görevleri

İlgili içeriği oluşturmak için kullanılan TaskTrackingInfo nesne, uygulama içinde görünür hale getirilebilecek bir dizi veri öğesi sağlar Gönderim İzleme Kitaplığı. Varsayılan olarak bu alanlar, ve araç görevden 5 durak uzakta olduğunda otomatik olarak atanır. İlgili içeriği oluşturmak için kullanılan görünürlük, görev tamamlandığında veya iptal edildiğinde sona erer. Alanlar aşağıdaki gibidir: şöyle olur:

  • 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

Görünürlük yapılandırmasını şu ayarları yaparak görev bazında özelleştirebilirsiniz: "the" TaskTrackingViewConfig ya da Fleet Engine içinde görev oluştururken veya güncellerken kullanılır. Bu da bağımsız veri öğelerinin ne zaman kullanılabilir olacağını belirleyen kurallar. (aşağıda görünürlük seçeneği olarak belirtilmiştir):

  • 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.
  • Her bir alan, Araç, göreve 5 durak mesafede.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Ayrıca projenizin varsayılan görünürlük yapılandırmasını şu şekilde özelleştirebilirsiniz: destek ekibiyle iletişime geçebilirsiniz.

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

Rota çoklu çizgileri görünür olduğunda aracın konumu da görünür olmalıdır Aksi takdirde, araç konumu çoklu çizgilerin sonuyla belirtilebilir. O 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 çizgisi / aracı sağlamak için bu kurallara uyulması gerekir konum görünürlüğü kombinasyonu:

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

    • Görünürlük seçeneğinde durdurma sayısı, TVS'ye kadar geçen süre veya kalan sürüş mesafesi, rota çoklu çizgileri daha düşük bir değer sağlamalıdır araçta bu görünürlük seçeneği için ayarlanan değere eşit veya daha yüksek konum. Aşağıda bununla ilgili bir örnek verilmiştir:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Rota çoklu çizgilerinin her zaman görünür bir görünürlük seçeneği varsa araç konumu her zaman görünür bir görünürlük seçeneği de sunmalıdır.
    • Araç konumunun hiçbir zaman görülemeyen görünürlük seçeneği varsa rota çoklu çizgileri hiçbir zaman görülmeyen 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ğine sahip olduğunda görünürlük olduğunda, araç konumu yalnızca her iki durumda da görünür emin olun.

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

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

    Bu örnekte, aracın konumu yalnızca kalan durak sayı en az 3 VE kalan sürüş mesafesi en az 3.000 ise metre.

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

JavaScript Yolculuk Paylaşımı Kitaplığı'nı kullanmadan önce hakkında bilgi sahibi olan, API anahtarı almayla birlikte.

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 talebi ile bir JSON Web Token (JWT) oluşturun.

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

Aşağıdaki örnekte, izleme kimliğiyle izleme için bir 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

basılan bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz uygun hak talepleriyledağıtılır. hesap sertifikası. Yalnızca jetonları basmak önemlidir ve sertifikalarınızı hiçbir zaman istemcilerle paylaşmayın. Aksi halde sisteminizin güvenliğini tehlikeye atabilir.

Alıcı bir veri yapısı döndürmelidir. söz şeklinde sarmalanmış iki alanla:

  • token dizesi.
  • expiresInSeconds sayısı. Bir jetonun süresi, bu süre içinde sona erer getiriliyor.

JavaScript Gönderim İzleme Kitaplığı, kimlik doğrulama aracılığıyla bir jeton ister jeton alıcısını tanımlar:

  • Geçerli bir jetonu yoksa (örneğin, alıcıyı başka bir zamanda çağırmadığında) yeni bir sayfa yüklemesinde veya alıcı bir jeton geri döndürmediğinde.
  • 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 getirmez.

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 şunları göz önünde bulundurun:

  • Uç nokta, jeton için bir geçerlilik bitiş zamanı döndürmelidir; aşağıdaki örnekte yukarıda data.ExpiresInSeconds olarak verilir.
  • Kimlik doğrulama jetonu alıcısının geçerlilik süresini (saniye cinsinden, zamanı gelene kadar) örnekte gösterildiği gibi kitaplığa eklenir.
  • 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 İzlemenin nasıl yükleneceği gösterilmektedir Belirtilen URL'den kitaplık. callback parametresi, initMap komutunu yürütür işlevini kullanın. defer özelliği, tarayıcının API yüklenirken sayfanızın geri kalanını oluşturmaya devam edin.

<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, JavaScript Gönderim İzleme Kitaplığı'nın nasıl kullanılacağı gösterilmektedir takip etmeniz gerekir. Şunları yaptığınızdan emin olun: komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yükleyin inceleyin.

Bir gönderim konumu sağlayıcı örneği gösterme

JavaScript Gönderim İzleme Kitaplığı bir konum sağlayıcısını önceden tanımlar Fleet Engine Deliveries API hakkında daha fazla bilgi edinin. Projenizi örneklendirmek için proje kimliğinizi ve jeton fabrikanıza 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 Yolculuğu Paylaşımı kitaplığını yükledikten sonra ilk kullanıma hazırla görüntüleyin ve bunu HTML sayfasına ekleyin. Sayfanızda bulunmalı harita görünümünü barındıran bir &lt;div&gt; öğesi. Aşağıdaki örnekte, &lt;div&gt; öğesi &lt;div&gt; olarak adlandırılır.

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

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ısına sağlanan izleme kimliği, birçok farklı görevler; Örneğin, aynı paket için teslim alma ve teslimat görevi ya da çok sayıda başarısız teslimat denemesi yapıldı. Şu görevde gösterilmek üzere bir görev seçildi: kargo takibi haritası. Gösterilecek görev şu şekilde belirlenir:

  1. Tam olarak bir tane açık teslim alma görevi varsa gösterilir. Hata oluşturuldu birden fazla açık teslim alma görevi varsa.
  2. Tam olarak bir tane açık teslim görevi varsa gösterilir. Bir hata birden fazla açık teslim görevi varsa oluşturulur.
  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 son zaman gösteriliyor.
    • Birden fazla kapalı teslimat görevi varsa bunların hiçbirinin bir sonucu yoksa bir hata oluşur.
  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 son teslim alma görevinin zaman gösteriliyor.
    • Birden fazla kapalı teslim alma görevi varsa hiçbirinin bir sonucu yoksa bir hata oluşur.
  5. Aksi takdirde herhangi bir görev gösterilmez.

Değişim etkinliklerini dinleme

Görev izleme bilgilerinden bir görevle ilgili meta bilgileri alabilirsiniz bir nesne kullanır. Meta bilgiler, ETA, kalan aktarma sayısı ve teslim alma veya teslimat öncesinde kalan mesafe. Meta bilgilerde yapılan değişiklikler bir update etkinliğini tetikler. Aşağıdaki örnek bu değişim olaylarının nasıl dinleneceğini gösterir.

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 tetikleyicisinden eşzamansız olarak kaynaklanan hatalar hata etkinliklerini kontrol edin. Aşağıdaki örnekte bu etkinliklerin nasıl dinleneceği gösterilmektedir izin vermiş olursunuz.

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.

İzlemeyi durdur

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

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

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 haritanızın stilini belirleme veya doğrudan kodda seçenekleri ayarlayarak bu süreci kolayca yürütebilirsiniz.

Bulut tabanlı harita stilleri kullanın

Bulut tabanlı harita stilleri Google Haritalar'ı kullanan uygulamalarınız için harita stilleri oluşturmanıza ve düzenlemenize olanak tanır Google Cloud Console'dan alabilirsiniz. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. Stil uygulamak için: JavaScript Gönderim İzleme haritanızda, mapId JourneySharingMapView ekleyebilirsiniz. mapId alanı değiştirilemez veya JourneySharingMapView örneklendirildikten sonra eklenir. Aşağıdakiler örnek, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceğini gösterir.

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 bir başka yolu da haritadaki Şunları yaptığınızda mapOptions: JourneySharingMapView oluşturun.

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 kullanma

JavaScript Gönderim İzleme Kitaplığı ile görünümü özelleştirebilir ve işaretleyicinin hissini verir. Bunu yapmak için ekleme yapmadan önce, Sevkiyat İzleme Kitaplığı'nın uyguladığı özelleştirmeleri işaretçileri haritaya eklemek ve her işaretçi güncellemesinde göstermek.

En basit özelleştirme yöntemi, MarkerOptions aynı türdeki tüm işaretçilere uygulanacak bir nesnedir. Değişiklikler nesnede belirtilen her bir işaretçi oluşturulduktan sonra uygulanır, varsayılan seçeneklerin üzerine yazılır.

Daha gelişmiş bir seçenek de, bir özelleştirme işlevi belirtmektir. Özelleştirme fonksiyonları, işaretçilerin verilere dayalı olarak biçimlendirilmesinin yanı sıra, daha fazla işaretçilerle etkileşimini (ör. tıklama işleme). Özellikle, Sevkiyat İzleme, çalıştırılacak nesnenin türü hakkındaki verileri özelleştirme işlevine İşaretçi aracı veya hedefi temsil eder. Böylece işaretçi stilinin işaretçi öğenin mevcut durumuna göre değişir; örneğin Varış noktasına kalan planlanmış durak sayısı. İsterseniz verileri Fleet Engine dışındaki kaynaklardan gelen verilerle karşılaştırabilir ve işaretçiyi bu bilgilerden faydalanabilirsiniz.

Gönderim İzleme kitaplığı aşağıdaki özelleştirme parametrelerini FleetEngineShipmentLocationProviderOptions:

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesini ifade eder. Herhangi bir öğenin stilini özelleştirmek için bu kalıbı yukarıda listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak bir işaretçi görürsünüz.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

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. Takip et işaretçilerden birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu deseni aşağıda listelenen özelleştirme parametrelerini dahil eder.

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, araç işaretçisine tıklama işlemenin nasıl ekleneceği gösterilmektedir. İşaretçilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı izleyin aşağıda listelenen özelleştirme parametrelerini dahil eder.

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

Kargo Takibi Kitaplığı ile kargonun görünümünü ve tarzını ve kargonun rotasını haritada göstermektir. Kitaplık, google.maps.Polyline gönderinin aktif veya kalan kargodaki her bir koordinat çiftine ait nesne path'ı seçin. Çoklu çizgi özelleştirmelerini belirterek Polyline nesnelerini biçimlendirebilirsiniz. İlgili içeriği oluşturmak için kullanılan daha sonra, bu özelleştirmeleri iki durumda uygular: verilerin ne zaman değiştiğine dikkat edin.

İşaretçi özelleştirmeye benzer şekilde, her bir sütun için PolylineOptions oluşturulduklarında, eşleşen tüm Polyline nesnelerine uygulanır veya güncellenir.

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 fonksiyon, her nesnenin stilini gönderim; örneğin, Polyline nesnesini daha koyu bir gölgeyle renklendirme veya araç yavaş hareket ettiğinde kalındığını gösterir. İsterseniz ve Polyline nesnesini buna göre biçimlendirin ekleyebilirsiniz.

Özelleştirmeleri, FleetEngineShipmentLocationProviderOptions. Aracın farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. seyahat etmiş, aktif olarak seyahat etmiş veya henüz seyahat edilmemiştir. İlgili içeriği oluşturmak için kullanılan parametreleri aşağıdaki gibidir:

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, bir Polyline nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir şununla: PolylineOptions Herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı kullanarak kapsamlı bir görünümünü elde edebilirsiniz.

JavaScript

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

TypeScript

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

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

Aşağıdaki örnekte, etkin Polyline nesnesinin görünüm. Herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak.

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

Varsayılan olarak tüm Polyline nesneleri görünür. Polyline nesnesi oluşturmak için görünmez, visible mülk:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

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

InfoWindow kullanabilirsiniz bir araç veya konum işaretçisiyle ilgili ek bilgiler görüntüleyin.

Aşağıdaki örnekte, InfoWindow oluşturma ve ekleme işleminin nasıl yapılacağı gösterilmektedir bir araç işaretçisine ekleyin:

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

Haritanın görüntü alanını otomatik olarak araca sığdırmasını durdurabilirsiniz ve öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. Aşağıdaki örnek yolculuk paylaşımını yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağını gösterir harita görünümüne gidin.

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

Şunu değiştirmek için JavaScript Gönderim İzleme Kitaplığı'nı kullanabilirsiniz: İşaretçiler veya başka özelleştirmeler içeren mevcut bir harita yapabilirsiniz.

Örneğin, standart google.maps.Map içeren bir web sayfanız olduğunu varsayalım. bir işaretçinin gösterildiği varlık:

<!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ınlarında belirtilen kimlik için şimdi haritada oluşturulacak.