JavaScript Filosu İzleme Kitaplığı ile filonuzu takip edin

JavaScript Filosu İzleme Kitaplığı, filolarındaki araçların konumlarını neredeyse gerçek zamanlı olarak görselleştirmenize olanak tanır. Kitaplık, teslimat araçlarının ve görevlerin görselleştirilmesi için Deliveries API'sini kullanır. JavaScript Gönderim İzleme Kitaplığı'nda olduğu gibi, standart google.maps.Map varlığının yerine kullanılabilen JavaScript harita bileşeni ve Fleet Engine'e bağlanacak veri bileşenleri içerir.

Bileşenler

JavaScript Filosu İzleme Kitaplığı, teslimat araçlarının ve duraklarının görselleştirilmesini sağlayan bileşenlerin yanı sıra, ETA veya teslimata kalan mesafe için ham veri feed'leri sunar.

Filo İzleme harita görünümü

Filo İzleme harita görünümü bileşeni, araçların ve görevlerin 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.

Konum sağlayıcılar

Konum sağlayıcıları, takip edilen nesnelerin konum bilgilerini yolculuk paylaşım haritasına göndermek için Fleet Engine'de depolanan bilgilerle çalışır.

Teslimat aracı konum sağlayıcı

Teslimat aracı konum sağlayıcısı, tek bir teslimat aracının konum bilgilerini gösterir. Aracın konumu ve teslimat aracı tarafından tamamlanan görevler hakkında bilgiler içerir.

Teslimat filosu konum sağlayıcısı

Teslimat filosu konum sağlayıcısı, birden fazla aracın konum bilgisini gösterir. Belirli araçlara veya konumlara göre filtre uygulayabilir ya da filonun tamamını gösterebilirsiniz.

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

Bu bölümde, Fleet Engine önceden tanımlanmış konum sağlayıcısı için harita üzerinde takip edilen konum nesnelerinin görünürlük kuralları açıklanmaktadır. Özel veya türetilmiş konum sağlayıcıları, görünürlük kurallarını değiştirebilir.

Teslimat araçları

Teslimat aracı, Fleet Engine'de oluşturulduğu anda görünür ve görevlerinden bağımsız olarak rota boyunca görülebilir.

Görev konumu işaretçileri

Planlanmış araç durakları, haritada araç durdurma işaretçileri olarak gösterilir. Tamamlanan görevlere ait işaretçiler, aracın planlanan duraklarından farklı bir tarzda gösterilir.

Görev sonuçlarının yeri, görev sonucu işaretleyicileriyle birlikte gösterilir. SUCCEEDED sonucuna sahip görevler başarılı görev işaretçileriyle görüntülenirken diğer tüm görevler başarısız görev işaretçileriyle görüntülenir.

JavaScript Filo İzleme Kitaplığı'nı kullanmaya başlayın

JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce Fleet Engine hakkında bilgi sahibi olduğunuzdan ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun. Ardından, görev kimliği ve teslimat aracı kimliği hak talebi oluşturun.

Görev kimliği ve teslimat aracı kimliği hak talebi oluşturma

Teslimat aracı konum sağlayıcısını kullanarak teslimat araçlarını takip etmek için görev kimliği ve teslimat aracı kimliği hak talebi içeren bir JSON Web Jetonu (JWT) oluşturun.

JWT yükünü oluşturmak için yetkilendirme bölümünde taskid ve deliveryvehicleid anahtarlarıyla ek bir talep ekleyin ve her anahtarın değerini * olarak ayarlayın. Jeton, Fleet Engine Service Super User Cloud IAM rolü kullanılarak oluşturulmalıdır. Bunun Fleet Engine varlıklarını oluşturmak, okumak ve değiştirmek için geniş kapsamlı erişim sağladığını ve yalnızca güvenilir kullanıcılarla paylaşılması gerektiğini unutmayın.

Aşağıdaki örnekte, araca ve göreve göre izleme için bir jetonun nasıl oluşturulacağı gösterilmektedir:

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

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 Filosu İ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:

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 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, belirli bir URL'den JavaScript Journey Paylaşımı kitaplığının 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>

Teslimat aracını takip etme

Bu bölümde, bir teslimat aracını takip etmek için JavaScript Filosu İ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.

Teslimat aracı konum sağlayıcısı örneği

JavaScript Filo İ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.

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-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. <div> öğesi aşağıdaki örnekte map_canvas olarak adlandırılmıştır.

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak bir görevle ilgili meta bilgileri deliveryVehicle nesnesinden alabilirsiniz. Meta bilgiler, tahmini varış süresini ve aracın bir sonraki alış veya bırakmasından önce kalan mesafeyi içerir. 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.deliveryVehicle contains data that may be        
  // useful to the rest of the UI.  
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

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

Hataları dinleme

Teslimat aracı bilgilerinin istenmesinden 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.

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

İzlemeyi durdur

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

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

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

Teslimat filosunu görüntüleme

Bu bölümde, teslimat filosunu görüntülemek için JavaScript Journey Paylaşım 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.

Teslimat filosu konum sağlayıcısı örneği verme

JavaScript Filosu İzleme Kitaplığı, FleetEngine Deliveries API'den birden fazla aracı getiren bir konum sağlayıcıyı önceden tanımlar. Proje kimliğinizi ve jeton alıcınızı örneklendirmek için bir referans kullanın.

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter, haritada gösterilen araçları filtrelemek için kullanılan bir sorguyu belirtir. Bu filtre doğrudan Fleet Engine'e iletilir. Desteklenen biçimler için bkz. ListDeliveryVehiclesRequest.filter.

locationRestriction, araçların haritada gösterileceği alanı sınırlandırır. Ayrıca, konum izlemenin etkin olup olmadığını da kontrol eder. Bu ayar ayarlanana kadar konum izleme başlamaz.

Konum sağlayıcı oluşturulduktan sonra harita görünümünü başlatın.

Harita görünümünü kullanarak konum kısıtlaması ayarlama

locationRestriction sınırları, harita görünümünde görünen alanla eşleşecek şekilde yapılandırılabilir.

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak filoyla ilgili meta bilgileri deliveryVehicles nesnesinden alabilirsiniz. Meta bilgiler; navigasyon durumu, kalan mesafe ve özel özellikler gibi araç özelliklerini içerir. Daha ayrıntılı bilgi için referans belgelerine bakın. Meta bilgilerde yapılan değişiklik, bir update etkinliğini tetikler. Aşağıdaki örnek, bu değişiklik etkinliklerinin nasıl dinleneceğini gösterir.

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

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Hataları dinleme

Teslimat filosu bilgileri istenirken eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler. Bu etkinliklerin nasıl dinleneceğini gösteren örnekler için Hataları dinleme bölümüne bakın.

İzlemeyi durdur

Konum sağlayıcının teslimat filosunu izlemesini durdurmak için konum sağlayıcının sınırlarını null (boş) olarak ayarlayın.

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

Teslimat filosunu görüntülerken bir teslimat aracını takip etme

Bir filoyu görüntülerken belirli bir teslimat aracı için rotayı ve yaklaşan görevleri gösterebilirsiniz. Bunu yapmak için hem bir Teslimat Filosu Konum Sağlayıcıları hem de Teslimat Aracı Konum Sağlayıcıları somutlaştırın ve ikisini de harita görünümüne ekleyin:

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

Teslimat filosu konum sağlayıcısı, teslimat araçlarını haritada göstermeye başlar. Filo işaretçisi tıklandığında teslimat aracı konum sağlayıcısının bir teslimat aracını takip etmesini sağlamak için işaretçi özelleştirmesini kullanın:

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Aynı araç için iki işaretçi oluşturulmasını önlemek amacıyla teslimat aracı konum sağlayıcısından işaretçiyi gizleyin:

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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 Filo İ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.

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

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

Kod tabanlı harita stili kullanma

Harita stilini özelleştirmenin diğer bir yolu, JourneySharingMapView öğesini oluştururken mapOptions değerini 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 kullan

JavaScript Filosu İ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. Filo İzleme Kitaplığı, haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde bunları uygular.

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. Filo İzleme, özellikle işaretçinin temsil ettiği nesne türüyle (araç, durak veya görev) ilgili verileri özelleştirme işlevine iletir. Bu, daha sonra işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, kalan durak sayısı veya görev türü) göre değişmesine olanak tanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçinin stilini bu bilgilere göre belirleyebilirsiniz.

Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini kullanabilirsiniz. Bunu yapmak için işaretçiden setVisible(false) çağrısı yapın.

Ancak performans nedeniyle konum sağlayıcıda FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter gibi yerel filtrelemeyle filtreleme yapmanızı öneririz. Bununla birlikte, ek filtreleme işlevine ihtiyacınız olduğunda özelleştirme işlevini kullanarak filtreleme uygulayabilirsiniz.

Filo İzleme kitaplığı aşağıdaki özelleştirme parametrelerini sağlar:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

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ştirme parametrelerinden 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ş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.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    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.

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

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

Görünür işaretçileri filtrele

Aşağıdaki örnekte, görünür araç işaretçilerinin nasıl filtreleneceği gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak tüm işaretçileri filtrelemek için bu kalıbı izleyin.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Teslimat aracını takip ederken çoklu çizgi özelleştirmelerini kullanın

JavaScript Filosu İzleme Kitaplığı ile, takip edilen aracın rotasının haritadaki görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, aracın 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şturulan veya güncellendiğinde eşleşen Polyline nesnelerinin tümüne 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, mevcut araç durumuna göre her bir nesnenin stilini değiştirebilir. Örneğin, Polyline nesnesini daha koyu bir gölgeye boyayabilir veya araç yavaş giderken kalınlaştırabilir. Hatta Fleet Engine dışındaki kaynaklarla birleştirme yapabilir ve Polyline nesnesini bu bilgilere göre şekillendirebilirsiniz.

FleetEngineDeliveryVehicleLocationProviderOptions 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:

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

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.

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

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

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

Aşağıdaki örnekte, özelleştirme işlevi kullanılarak etkin bir Çoklu Çizgi nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen çoklu çizgi özelleştirme parametrelerinden herhangi 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.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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:

remainingPolylineCustomization = {visible: false};

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.

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

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

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

Mevcut bir haritayı değiştirme

İşaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı bu özelleştirmeleri kaybetmeden değiştirebilirsiniz.

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

Filo İzleme'yi içeren 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. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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, which includes Fleet Tracking functionality.
    -->
    <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 kimlikle bir teslimat aracı kullanıyorsanız bu araç artık haritada oluşturulur.