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

JavaScript Filo İzleme Kitaplığı, işletmenizin bulunduğu konumları görselleştirmenize neredeyse gerçek zamanlı olarak tanıyoruz. Kitaplıkta Deliveries API'si teslimat araçlarının ve görevlerin görselleştirilmesine olanak sağlar. Beğen JavaScript Gönderim İzleme Kitaplığı, JavaScript harita bileşeni içerir ve standart google.maps.Map varlığı ve veri bileşenlerinin bağlanması için ilk adımıdır.

Bileşenler

JavaScript Filo İzleme Kitaplığı, görselleştirme için bileşenler sağlar teslimat araçlarının ve aktarma noktalarının yanı sıra TVS veya kalan teslimat süresi için ham veri feed'i teslimata kalan mesafedir.

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

Filo İzleme harita görünümü bileşeni, araçları ve görevlerin yeri. Bir aracın rotası biliniyorsa harita görünümü bileşeni, tahmin edilen yolunda hareket ederken bu araca animasyon ekler.

Konum sağlayıcılar

Konum sağlayıcılar, konum göndermek için Fleet Engine'de depolanan bilgilerle çalışır izlenen nesnelere ait bilgileri yolculuk paylaşımı haritasına ekleyin.

Teslimat aracı konumu sağlayıcı

Teslimat aracı konum sağlayıcısı, tek bir teslimat aracının konum bilgisi. Aracın konumu ve aracın bulunduğu konum ya da teslimat aracı tarafından tamamlanan görevlerdir.

Teslimat filosu konum sağlayıcısı

Teslimat filosu konum sağlayıcısı, birden fazla aracı görüntülüyor. konum ekleyebilirsiniz. Belirli araçları veya konumları filtreleyebilir ya da tüm filoyu test edin.

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

Bu bölümde, izlenen konum nesneleri için görünürlük kuralları açıklanmaktadır. haritasında, önceden tanımlanmış Fleet Engine konum sağlayıcısının haritasına bakın. Özel veya türetilmiş konum sağlayıcılar görünürlük kurallarını değiştirebilir.

Teslimat araçları

Bir teslimat aracı, Fleet Engine'de oluşturulur oluşturulmaz görünür durumda, ve görevlerinden bağımsız olarak rota boyunca görünür durumdadır.

Görevler için konum işaretçileri

Planlanan araç durakları, haritada araç durma işaretçileri olarak gösterilir. İşaretçiler bir aracın görünümünden farklı bir tarzda görüntüleniyor motive etmenin etkili bir yoludur.

Görev sonuçlarının konumu, görev sonucu işaretçileriyle gösterilir. SUCCEEDED sonucu olan görevler, başarılı görev işaretçileriyle gösterilir. diğer tüm görevler ise başarısız görev işaretçileriyle gösterilir.

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

JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce hakkında bilgi sahibi olan, API anahtarı almayla birlikte. Ardından bir görev kimliği ve teslimat aracı kimliği hak talebi oluşturun.

Görev kimliği ve teslimat aracı kimliği 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 talebiyle bir JSON Web Token (JWT) oluşturun.

JWT yükünü oluşturmak için yetkilendirme bölümüne bir talep daha ekleyin taskid ve deliveryvehicleid anahtarlarıyla birlikte kullanmak ve * değerine ayarlayın. Jeton Fleet Engine kullanılarak oluşturulmalıdır Hizmet Süper Kullanıcısı Cloud IAM rolü. Bunun geniş erişim izni verdiğini unutmayın oluşturmak, okumak ve değiştirmek için kullanılabilir ve yalnızca güvenilir kullanıcılarla paylaşın.

Aşağıdaki örnekte, araç bazında takip için jetonun nasıl oluşturulacağı gösterilmektedir ve görev:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "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

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 Filo İ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 Yolculuk Paylaşımı'nın nasıl yükleneceği gösterilmektedir kitaplığını açar. 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>

Teslimat aracını takip etme

Bu bölümde, JavaScript Filo İzleme Kitaplığı'nın nasıl kullanılacağı gösterilmektedir bir teslimat aracını takip etme. Şunları yaptığınızdan emin olun: komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yükleyin inceleyin.

Teslimat aracı konum sağlayıcısı gösterme

JavaScript Filo İzleme Kitaplığı bir konum sağlayıcısını önceden tanımlar Fleet Engine Deliveries API'sinden yararlanabilirsiniz. Proje kimliğinizi ve bunu örneklendirmek için jeton fabrikanıza bir referans.

JavaScript

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

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

TypeScript

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

JavaScript

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

TypeScript

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şim etkinliklerini dinleme

deliveryVehicle nesnesinden bir görevle ilgili meta bilgileri alabilirsiniz konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, ETA ve aracın bir sonraki alma veya bırakma işleminden önce kalan mesafe Değişiklikler eklemek 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.deliveryVehicle contains data that may be        
  // useful to the rest of the UI.  
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

TypeScript

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ı bekleyin

Teslimat aracı bilgileri tetikleyicisi isteğinden eşzamansız olarak ortaya çıkan hatalar hata olayları. 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);
});

İzlemeyi durdur

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

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.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Teslimat filosunu görüntüleme

Bu bölümde, JavaScript Yolculuk Paylaşımı kitaplığının nasıl kullanılacağı gösterilmektedir teslimat filosunu görüntüleyebilirsiniz. Şunları yaptığınızdan emin olun: komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yükleyin inceleyin.

Bir teslimat filosu konum sağlayıcı örneği gösterme

JavaScript Filo İzleme Kitaplığı, JavaScript Filo İzleme Kitaplığı, şuradan birden fazla araç getirir: FleetEngine Deliveries API. Şunu kullanın: ve bunu örneklendirmek için jeton alıcınıza bir referans.

JavaScript

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

TypeScript

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, üzerinde görüntülenen araçları filtrelemek için kullanılan bir sorguyu belirtir tıklayın. Bu filtre doğrudan Fleet Engine'e iletilir. Görüntüleyin 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. Konum izleme bu ayar ayarlanana kadar 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ı, mevcut alanla eşleşecek şekilde yapılandırılabilir görebilirsiniz.

JavaScript

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

TypeScript

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şim etkinliklerini dinleme

Filoyla ilgili meta bilgileri deliveryVehicles bağlantısından alabilirsiniz. bir nesne kullanır. Meta bilgiler, gezinme durumu, kalan mesafe ve özel özellikler gibi özellikler; bkz. referans belgeleri inceleyebilirsiniz. Meta bilgilerde yapılan değişiklikler bir update etkinliğini tetikler. İlgili içeriği oluşturmak için kullanılan aşağıdaki örnekte, bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

JavaScript

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

TypeScript

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ı bekleyin

Teslimat filosu bilgisinin istenmesinden eşzamansız olarak kaynaklanan hatalar hata etkinliklerini tetikler. Bu etkinlikleri nasıl dinleyeceğinizi gösteren örnekler için Hataları dinleme bölümüne geçin.

İzlemeyi durdur

Konum sağlayıcının teslimat filosunu izlemesini durdurmak için sınırları belirleyin konum sağlayıcıyı null olarak ayarlayın.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

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.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Teslimat filosunu görüntülerken teslimat aracını izleme

Bir filoyu görüntülerken belirli bir filo için rotayı ve yaklaşan görevleri gösterebilirsiniz. teslimat aracı. Bunu yapmak için hem bir Teslimat Filosu Konumu hem de Teslimat Aracı Konum Sağlayıcısı arasında bağlantı kurabilir ve ikisini de harita görünümü:

JavaScript

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

TypeScript

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ı tıklayın. Teslimat aracının konumunu etkinleştirmek için işaretçi özelleştirmeyi kullanın sağlayıcı, filo işaretçisi tıklandığında bir teslimat aracını takip etmelidir:

JavaScript

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

TypeScript

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

Oluşturmayı önlemek için işaretçiyi teslimat aracının konum sağlayıcısından gizleyin aynı araç için iki işaretçi vardır:

JavaScript

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

TypeScript

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

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. Alıcı: JavaScript Filo İzleme haritanıza bir stil uygulayın, bir 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ği.

JavaScript

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

TypeScript

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 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 Filo İzleme Kitaplığı ile, reklamlarınızın görünümünü ve tarzını haritaya eklendi. Bunu işaretçi özelleştirmeleri belirterek, Filo İzleme Kitaplığı'nın haritaya işaretçi eklemeden önce uyguladığı ve her işaretçi güncellemesiyle birlikte.

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, Filo İzleme İşaretçinin bulunduğu nesnenin türü hakkında özelleştirme işlevine veri iletir. temsil eder: araç, durak veya görev. Bu işlem, işaretçi stilinin öğenin mevcut durumuna göre; Örneğin, ya da görev türüne göre değişebilir. Dilerseniz kaynaklardan gelen verilerle bile birleştirebilirsiniz. ve işaretçiyi bu bilgilere göre biçimlendirin.

Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini de kullanabilirsiniz. Bunun için şu numarayı arayın: setVisible(false) tıklayın.

Ancak, performans nedeniyle, kaliteyi artırmak için yerel konum sağlayıcıdaki filtreleme gibi FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Bununla birlikte, ek filtreleme işlevine ihtiyaç duyduğunuzda, filtreleme işlevini kullanabilirsiniz.

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 MarkerOptions nesnesini ifade eder. Herhangi bir öğenin stilini özelleştirmek için bu kalıbı yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçi seçer.

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.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    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: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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

Aşağıdaki örnekte, hangi araç işaretçilerinin görünür olduğunun nasıl filtreleneceği gösterilmektedir. İşaretçi özelleştirmesinden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı izleyin parametrelerini dikkate alır.

JavaScript

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

TypeScript

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

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

JavaScript Filo İzleme Kitaplığı ile, görünümü ve görünümü özelleştirebilir, takip edilen aracın rotasının haritada hissedilmesini sağlar. Kitaplık, google.maps.Polyline aracın aktif veya kalan koordinatlarındaki her bir koordinat çifti için 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 şununla eşleşen tüm Polyline nesnelerine uygulanır: oluşturabilir veya güncelleyebilir.

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, mevcut araca bağlı olarak her nesnenin stilini değiştirebilir eyalet; örneğin, Polyline nesnesini daha koyu renklendirebilir veya araç yavaş hareket ettiğinde kalınlaştığını gösterir. Şu kişilerden bile katılabilirsiniz: ve Polyline nesnesini buna göre biçimlendirin ekleyebilirsiniz.

Özelleştirmeleri, FleetEngineDeliveryVehicleLocationProviderOptions. 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:

• takenPolylineCustomization, seyahat edilmiş bir yol için;
• activePolylineCustomization, aktif olarak dolaşan bir yol için;
• remainingPolylineCustomization, bir yol haritası oluşturabilirsiniz.

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 bir Çoklu Çizgi için stilin nasıl yapılandırılacağı gösterilmektedir nesnesini oluşturur. çoklu çizgi özelleştirmesinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini ayarlama parametrelerini dahil eder.

JavaScript

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

TypeScript

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

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

TypeScript

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

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

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ı değiştirebilirsiniz. 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>

Filo İzleme'yi içeren 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. 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>

Teslimat aracınızın Uluru yakınlarında belirtilen kimlik için şimdi haritada oluşturulacak.